Pixi.js: Import PixiJS as ESM without bundlers

[NemoStein]

I'm trying to import Pixi in a Snowpack application, but, although the Pixi package on NPM contains a esm file (/lib/pixi.es.js), it can't be loaded directly in browser, as it uses node's native libs (e.g.: url).

Is it possible to import PixiJS as an ES Module, without the use of Rollup, Webpack or any other bundler?

[bigtimebuddy]

Rollup, Webpack and Parcel all can provide builtin polyfills for Node’s url and path utils. I’m not familiar with Snowpack, but could you overrides these? There are also public packages (e.g., url) by the same name you could may install alongside?

The other option is to remove any node-like dependencies from the project. I’d first try to find a Snowpack workaround for this problem before we do that. Also, those other bundles mentioned above are all unofficially supported by pixi. A Snowpack-based boilerplate project would be helpful to test this and work out the best way to support this tool too.

[NemoStein]

to support this tool too

That's the thing... I'd like to use no such tools.
Snowpack doesn't transform your code in anyway (it can, but that isn't the point). The idea is to use open web standards only.

[bigtimebuddy]

Just because it’s a web standard doesn’t mean Pixi supports it. There are lots of modern browser features that we don’t support yet because adoption is low or we are still trying to run in a broad array of browsers. This is the first request for running ES modules directly. It’s not a bad idea but not a huge priority at the moment.

The ES build was added to support tree shaking with bundling not to run in the browser using module importing.

If someone wants to take on this task, we would consider a PR.

[SagnikPradhan]

Quite a bummer you guys don't have an es module version.

[mmahandev]

This would be something great to have

[bigtimebuddy]

Okay, I hear you all. We will work on a browser-based ESM bundle.

[SagnikPradhan]

For the time being I created this. The problem I had was that transpiling the libraries in dev mode made it too slow. Hence the solution.

[DrSensor]

@SagnikPradhan 404 broken link 🤔

[bigtimebuddy]

@DrSensor here are the official builds from the dev branch. We don't yet have a release, but these will be in v5.4.0.

• https://pixijs.download/dev/pixi.mjs
• https://pixijs.download/dev/pixi.min.mjs
• https://pixijs.download/dev/pixi-legacy.mjs
• https://pixijs.download/dev/pixi-legacy.min.mjs

Example

https://github.com/bigtimebuddy/pixi.js-browser-module-example

[SagnikPradhan]

@DrSensor Sorry, here is the new link. Ended up turning the simple script into a package.