Pixi.js ES6

[powerfear]

Hello, I've been working on a ES6 version of Pixi.js and I thought I'd share it in case anyone is interested in using it.

 

It's currently updated to the latest commit of the dev branch as of this post. I've been updating it for a while and I intend to continue doing so, at least for a little while.

 

You can get it right here: https://github.com/powerfear/pixijs-es6

 

You can directly use the src in the "src" folder with whatever setup you like to convert it to ES5.

 

There is also a commonjs folder which basically contain the ES6 source transpiled to ES5 + Commonjs for the import. This can be used with browserify, pure-cjs or similar commonjs build tools.

 

For an example of a possible workflow you can checkout: https://github.com/powerfear/es6-workflow

 

I am basically using https://github.com/square/es6-module-transpiler for final builds while I convert the import to commonjs and use https://github.com/RReverser/pure-cjs during development as it is about 7 times faster to build in my case.

 

I am still working on improving and simplifying the workflow. If you have suggestions feel free to leave them here, send me pull request, issues.

[d13]

 

It's currently updated to the latest commit of the dev branch as of this post. I've been updating it for a while and I intend to continue doing so, at least for a little while.

Are you doing this manually, or is it automated?

[powerfear]

 

Are you doing this manually, or is it automated?

 

It is not automated, this is not an exact copy of PIXI converted to ES6. For instance I could've kept the global PIXI object, but then there wouldn't be any differences then using the current version of PIXI. The point of this is not to use a global object but rather to use the ES6 import system. To get this to work I also had to make few other changes to PIXI. PIXI had quite a couple of circular dependencies and I had to resolve them which meant moving some code around to different files to solve them. All of those changes made automation not a straightforward option. PIXI actually doesn't receive that many large changes that frequently, I am simply manually applying the commit which usually consist of few lines of codes.

[PixelPicoSean]

So you're just using the es6 "module" system, I'll suggest to use es6-module-transpiler and you don't need to modify even one line of PIXI itself. The es6-module-transpiler simple compiles es6 module into cjs/amd, and then you can use some cjs/amd loader to make it work.

I made a simple slush generator for Phaser (https://www.npmjs.org/package/slush-phaser-project), using almond.js to load compiled amd modules and it should be very easy to change to support PIXI.

[powerfear]

So you're just using the es6 "module" system, I'll suggest to use es6-module-transpiler and you don't need to modify even one line of PIXI itself. The es6-module-transpiler simple compiles es6 module into cjs/amd, and then you can use some cjs/amd loader to make it work.

I made a simple slush generator for Phaser (https://www.npmjs.org/package/slush-phaser-project), using almond.js to load compiled amd modules and it should be very easy to change to support PIXI.

No I completely converted PIXI itself to use es6 module and classes internally. Also I am using es6-module-transpiler.

[d13]

Wow, that's amazing, thank you for sharing it!

I do a lot or work in ES6 so it's nice to see an ES6 example of such a big library.

[rich]

Very nice work. ES6 is definitely the way forward and is where we'll move Phaser 3 as well.

[PixelPicoSean]

No I completely converted PIXI itself to use es6 module and classes internally. Also I am using es6-module-transpiler.

That's really cool, sorry I miss reading a few lines

I'll checkout your sample workflow which looks amazing. I recommend to create a slush generator to make life easier.

One more question, what are the benefits of using cjs instead of amd, or just your choice?