Need help using PixiJS from npm

[Vivraan]

I need help understanding how to use PixiJS through npm to run the example on the Docs Index page.

[ivan.popelyshev]

Usually, people try set up something with webpack/rollup/whatever_they_want and then complain it doesnt work, post the demo, we resolve it. There are tens of ways to setup pixi with npm and hundreds of associated bugs, which one do you want?

Edited December 31, 2020 by ivan.popelyshev

[robert.corponoi]

  

I prefer using Rollup for situations like this. A simple Rollup + pixi.js setup could be achieved like so:

1. Use the basic Rollup template from GitHub. You can either click "Use this template" or just clone/download it locally.

2. Open up the template in your favorite code editor and make sure you run `npm install` to install the dependencies needed. You won't need all of the dependencies in production but the template is minimal enough that it's easy to remove unnecessary things later.

3. Rollup will throw some warning because of pixi's usage of url so make the following change on line 17.

// Change this
resolve()

// To this
resolve({ preferBuiltins: false })

4. In the `src/main.js` file, you can add in your pixi code. For example you can use the following to get a rectangle on the screen:

import * as PIXI from 'pixi.js';

const app = new PIXI.Application({ width: 800, height: 600, backgroundColor: 0x1099bb });
document.body.appendChild(app.view);

const rect = new PIXI.Graphics();
rect.beginFill(0xffffff);
rect.lineStyle(5, 0x000000);
rect.drawRect(app.view.width / 2, app.view.height / 2 , 200, 200);

rect.pivot.x = 100;
rect.pivot.y = 100;

app.stage.addChild(rect);

5. Now you can just use the following command

npm run dev

That'll boot up a local dev server with hot reload and if you follow the link you'll see your pixi app working.