Jump to content

project setup for pixi v5 + weback + typescript - help needed


Recommended Posts

Hi, I've been using pixi for many years but previously always loaded pixi.min.js via a script tag in my index.html

Now I need to set up a typescript project with pixi v5 installed from npm into my node modules, and using webpack (or possibly rollup ) as a module bundler.

I'm using VSCode. I created a new project and ran npm init, installed typescript, wepback (+ typescript plugin),  and pixi js. Added barebones tsconfig.json and webpack.config.js.

I created a test entry.ts file that imports pixi and instantiates a sprite.

All the documentation I have found by googling says that I should be able to import pixi like:

import * as PIXI from 'pixi.js';

but this isn't working for me. VSCode complains 'Cannot find module 'pixi.js'.

I see the actual folder in node_modules is called @pixi 

is that related to the problem?

How should I be importing pixi in my typescript files?

Edited by alex_h
Link to comment
Share on other sites

I honestly dont like webpack/rollup. I barely tolerate parsel. Its integration with typescript is awful. However, because people are moving there without realizing how it works internally, and because most of PixiJS team are using bundlers already, I provide those instructions.

You need package `pixi.js` or `pixi.js-legacy`  or you have to make your own bundle here: https://pixijs.io/customize/ (switch to bundler)

If you have pixi plugins that'll be extra problem, because most of them dont support bundlers. https://github.com/pixijs/pixi-layers/blob/master/README.md#webpack-browserify-angular - that's how to do it. Add it in your first file or in bundle file if you have one.

In general, situation will change when we move everything, including TS definitions to module approach. We are halfway there.

Edited by ivan.popelyshev
Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...