Phaser ES6/ES2015 Boilerplate

[Daniel Belohlavek]

First of all: thanks everybody for the kind comments. I haven't been using the boilerplate lately so if you find any bugs please submit them as issues on Github (remember to reproduce the bug on different environments).

 

Hi,

 

any chance of a guide for using this ES6 Boilerplate with Visual Studio Code please? (currently I use TypeScript but wanted to give this version a go)

 

mainly I'm after getting the Intellisense working

 

thanks

J

 

Here's how I used to do it (there's a new version of VScode, check the docs as there may be a better way):

1. Drop all necessary definition files (.d.ts) on the root of your project.
2. Create a jsconfig.json file on the root of your project that contains the following:

{	"compilerOptions": {		"target": "ES6"	},	"files": [		"./src/index.js",		"./src/states/GameState.js",		"./src/objects/RainbowText.js",		"phaser.d.ts",		"pixi.d.ts"	]}

Note that all the "Files" belong to the default files found on my boilerplate, please update those to match your needs.

 

Checkout the docs for more information: https://code.visualstudio.com/Docs/languages/javascript

And feel free to ask for help if this doesn't work 

[antt]

Hye, thaks for this Boilerplate, it is great!

In order for IntelliSense to work, you don't even need to declare your files array.

it works if you just drop your .d.ts files in the root of your project and exclude node_modules in your jsconfig.json

like this:

{    "compilerOptions": {		"target": "ES6"	},    "exclude": [        "node_modules"    ]}

it didn't work with the files array until i added the exclude part.

[Daniel Belohlavek]

Hello everybody! There are a couple of discussions going on at Github regarding the name of the project, the use of Webpack and tutorials. I would love your input so please check out the Issues section and don't forget to Watch the repo if you want to stay updated on future discussions!

Happy coding!

[mattstyles]

I stuck in my 2 pence on the issue of including webpack, I'll summarise here too.

I dont see how a project can support both a webpack build solution and the one you currently have. They are exclusive, although there is a place for both boilerplates from which to build.

For example, Webpack is opinionated and fairly all-encompassing, if I did not want to (or didnt know how to) use it then I would be stuck if your boilerplate became webpack-only. Similarly it would be hard to disentangle gulp from your boilerplate. These systems either require separate scaffolds or you choose to only support one, the choice should of course be dictated purely by which one you know best (doing it by popularity would be a disaster).

[mattstyles]

Sorry for the double post but I've just read through more closely and this is unrelated to my previous post.

If I get it right you're using `gulp` to watch and then running `browserify` from scratch? And you eschewed `watchify`?

The biggest advantage of watchify is the caching. Watchify will only re-build what changes (well, it gets close anyway), this will drastically reduce build times. Any moderately complex project will take seconds to build from scratch (this grows and grows faster than linear as you add files), watchify can reduce this down to under a second (and usually does) plus it scales well as the project goes so the benefits just get better and better.

 

[Igor Georgiev]

On 7/31/2015 at 1:24 AM, Daniel Belohlavek said:

Hello! It's been a while since my last topic, I've been feeding my brain a little bit and here is the result:

 

I've created a tiny boilerplate available on Github. The aim of the project is to help other developers to get started a little bit faster without having to spend too much time setting up Build tasks (basically setting up the transpiler).

 

The project comes with:

• A heavily commented gulpfile that uses Browserify and Babel to transpile your ES6 code into ES5.
• Two build modes: development and production (neither one is too complex or opinionated).
• Browsersync for live reload and weinre for your mobile debugging needs.
• UglifyJS for the production build. No sitelock or heavy obfuscation code included.

You can access the repo here: https://github.com/belohlavek/phaser-es6-boilerplate

You can see the example included on codepen (no modules): http://codepen.io/belohlavek/full/aORJVL

 

Bonus information:

You can get code intellisense for ES6 with VSCode + phaser.d.ts (Typescript definition). Works like a charm on Ubuntu.

 

If you feel I missed out on something, or worst, if you think I screwed up please let me know! I'm sure there are at least a couple of dumb typos out there.

 

Are any of you already using Babel with Phaser? Any Typescript users willing to give ES2015 a try?

 

Thanks for reading

hey man, I love your template - I am already doing my projects on this basis. However, maybe a noob question, but how do I debug it with webstorm? I am messing up the Gulp debug config of the IDE, I have no idea how to do it. Do you have any pointers?