PixiJS as a module without webpack

[Baylock]

Hi,

I'm trying to learn how ES6 modules work and boy is it complicated...

I was "forced" to do so since I had to setup a three.js project and three isn't working fully if not as a ES6 set of modules.
Moreover, it seems that ES6 moules are the way to go from now on so I have to join that bandwagon sooner or later.

The problem is, resources online assume that you know it all at once and most often than not, presume that you know what bundlers are and what they do under the hood.
But before learning those, I want to be able to install modules without them and see how things work instead of automating everything and eventually not understanding anything.

So, I started by instaling three.js via NPM and created an Express server. It all went fine.

What I did is add this in my Express javascript file:

app.use(express.static(__dirname + '/public'))
app.use('/build/', express.static(path.join(__dirname, 'node_modules/three/build')));
app.use('/jsm/'  , express.static(path.join(__dirname, 'node_modules/three/examples/jsm')));

Then, in the html file, I added this:

<script type="importmap">
    {
        "imports": {
            "three": "./build/three.module.js",
            "three/examples/jsm/controls/OrbitControls":"./jsm/controls/OrbitControls.js"
        }
    }
</script>
<script type="module" src="client.js"></script>

 

And in the main js file, I added this:

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

It works, no need of webpack and I control exactly what is happening under the hood. So far so good.



Now I try to do the same with PixiJS and that's where I'm stuck


I install it by typing :

npm install pixi.js

This creates at least three folders in the node-modules folder (and that's confusing since I don't know which one should be pointed to) => "@pixi", "pixi", "pixi.js".

Then I went to the express javascript file and edited it like this:

app.use(express.static(__dirname + '/public'))
app.use('/dist/' , express.static(path.join(__dirname, 'node_modules/pixi.js/dist')));
app.use('/build/', express.static(path.join(__dirname, 'node_modules/three/build')));
app.use('/jsm/'  , express.static(path.join(__dirname, 'node_modules/three/examples/jsm')));

(If I don't, I then get a relative reference error when launching the server. Basically, Pixi.js isn't found)

Then I went to the html file and edited it like this:

<script type="importmap">
    {
        "imports": {
            "pixi.js": "./dist/pixi.js",
            "three"  : "./build/three.module.js",
            "three/examples/jsm/controls/OrbitControls":"./jsm/controls/OrbitControls.js"
        }
    }
</script>
<script type="module" src="client.js"></script>

And finally, I edited the main js file like this:

import * as PIXI from 'pixi.js';
import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

So, I test this by adding a Pixi scene just under the import statements:

PIXI.settings.SCALE_MODE = PIXI.SCALE_MODES.LINEAR;

let app = new PIXI.Application( 800, 800 , {
	backgroundColor   : 0x0000FF,
	antialias         : true,
	legacy            : true,
	clearBeforeRender : true,
	autoResize        : true,
	powerPreference   : 'high-performance'
});
document.body.appendChild(app.view);

etc...

But then I get this error message now:
 

Uncaught TypeError: Cannot read property 'LINEAR' of undefined

And if I get rid of that first line, starting directly with the PIXI app, I get this:
 

Uncaught SyntaxError: The requested module 'pixi.js' does not provide an export named 'Application'

And that's where I'm stuck.

Even though now pixi.js is recognized (I didn't have any relative reference error a 404 error message anymore), I still get those other error messages now.

I tried to play with the configuration files (node-modules, Express file, importmaps in html) and their pointers but none of it worked and there is no internet resource where I can find how to install PixiJS with npm but without a bundler.

So I would welcome your help.

I insist on one thing  though: don't consider a bundler or a boilerplate please in your answer. My point is not just to get PIXI to work somehow. It works fine if I import it as a url from a html script tag. I want to understand how things work, using NPM and no bundler.

Thank you very much.


 

[ivan.popelyshev]

PixiJS official discord:

https://discord.gg/D4u5ATmb

Thse things are better be done with someone online ) Btw I prefer UMD (no modules, just regular JS files) and it works for me in both pixi and threejs

[Baylock]

Thanks for your answer.
You are the one who made me sign up here. I read many of your helpful answers regarding the topic in general and some of them helped me a lot.

Regarding your answer:

I've been there and tried that. The PixiJS Discord is fine and all but I asked a simple question a few days ago and the answers were vague and unhelpful. It felt like they weren't interrested. I found most answers to my questions here actually.

And I too am way more comfortable with no modules but:

1) it is sold as the unavoidable standard to come.
2) Most of the tutorials online assume that you do it this way and before learning anything about npm/modules/bundlers, I didn't understand a third of the online resources, so I'm better off trying to understand it sooner than later.
3) My console already warns me that three.js won't be usable without the modules in a very near future (next iterations). So fighting against it seems like a dead end eventually.
4) I was able to use the core functions of three.js by just using a CDN link but as soon as I try to use some "examples" function, they just won't load without the modules. There are ways to make it work with some CDN repositories but this would certainly not work locally, with local files.
I tried for days, with unsuccessful results, before I decided that I had to learn the new ways of doing stuff...
And the new way of doing stuff is confusing because each library is doing it its own way. So, so far, i'm dealing with a kind of "non standard" standard as what I did with three.js doesn't work with Pixi.

Edited April 19, 2023 by Baylock

[Baylock]

I got the answer:
I should point to pixi.mjs instead of pixi.js.
Thanks.