Empty Phaser ES6 template?

[ekeimaja]

Has anyone done or found blank ES6 Phaser template? All I have found, are just ready multiple state and gulp templates. ES6 is new thing for me, so that's why I'd wish to get just blank project template without multiple states etc. 

[mattstyles]

Here you go

I dont really use Phaser so there is a very very basic skeleton in the `src` directory but you can delete that and do it however you like. The build expects an index.js and an index.html in there but everything else is up to you (and its trivial to change that around if you prefer).

The only gotcha is that Phaser doesn't work very nice with any sort of module spec so the index.html just loads it up from cdn (you can serve it yourself if you prefer), honestly, keeping Phaser outside of your usual modules isn't too much of a problem (it doesnt have to be in the head either, just so long as it is before your code file and loading 2 js files isnt an issue for browsers).

It uses browserify for modules and babel for es6 transpilation. I've thrown in my own preset, which is just standard es6 stuff with regenerator for async/await and (I think) maybe class properties for es2016 (es7) style class props, but, use whatever preset you want. If you're only targeting the very newest browsers then they support all (or nearly) es2015 stuff already so you could probably get away with dropping the babel step (in theory, browsers will optimise for the new stuff in time so doing unnecessary transpilation could be a perf drain, currently, transpilation usually speeds things up as JS engines are optimised for old stuff better than new stuff).

It doesn't use gulp because who needs that extra complexity? Total waste of time for 99% of projects.

It includes budo which spins up a server and does your transforms, it'll start watching so consequent builds will be quick-quick. This includes source maps. There is even a prod build as well (I'd recommend using -cm flags for uglify though) but you might want to tinker with that when you get going (build images into sprites atlases, or inline svg, env vars or whatever else you need). Its all in the README and all the scripts are in one nice place in the package.json.

Let me know here or open an issue if something is amiss or you want more info about why things are how they are, I've never really used the seed beyond simple tests (speaking of which, there is no test sling included).

 

[ekeimaja]

When I ran that with Mozilla, console gives this error:

SyntaxError: import declarations may only appear at top level of a module

[MarvinB]

You need the gulp compiler with babelfy to create a ES5 build file that runs in Mozilla

[mattstyles]

1 hour ago, MarvinB said:

You need the gulp compiler with babelfy to create a ES5 build file that runs in Mozilla

No you dont, gulp simply runs tasks, you never need it, you can run those tasks yourself. Gulp isn't a compiler anyway.

13 hours ago, ekeimaja said:

When I ran that with Mozilla, console gives this error:

SyntaxError: import declarations may only appear at top level of a module

`Import` syntax shouldn't get anywhere near the browser and whilst the spec dictates imports should be at the top of files, babel doesn't actually care (this is due to the delivery mechanism).

In any case, it sounds like you are serving the `src` folder directly, you need to run your code through the transforms to perform transpilation to give you access to all unimplemented features.

Run the project from the command line using `npm start -- --open`, or use `npm run build` and serve the resulting `dist` directory.

Imports

Browserify follows the commonJS spec, which the proposed module spec (its only in proposal at the moment I think, I'm surprised FF gives you that error at all so maybe its closer to implementation stage) also follows, browserify looks for node style module includes using `require` and `module.exports` syntax. Babel simply transforms `imports` and `exports` into node module spec syntax, with destructuring its a 1:1 change, simple.

This means that browserify is responsible for delivering your modules, which is does via closures and functions, this is a synchronous function. When the actual module spec hits each module will be delivered over the network, hence asynchronously, its a potentially incredibly tricky web of edge-cases to negotiate. Declaring imports at the top gives the browser a chance to start loading additional modules, even before its finished analysing the current file, so it likes import decs at the top of files (currently, this is all still subject to change).

Hence, FF is telling you your code stinks! Ha ha. Chrome, on the other hand, doesn't understand the syntax and throws a syntax error. FF actually understands most of the ES2015 spec (the starter I linked you to supports some ES2016 and even 17 stuff), the imports error is actually not very helpful, its not telling you FF has an issue with `imports` being in a specific place, its telling you it has an issue with `imports` i.e. it does not yet understand modules.

[ekeimaja]

Now I tried to launch it with npm, and it gives just errors.

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'build', 'run' ]
2 info using [email protected]
3 info using [email protected]
4 info build /home/ekeimaja/Desktop/phaser-es2015-master/run
5 verbose stack Error: ENOENT: no such file or directory, open '/home/ekeimaja/Desktop/phaser-es2015-master/run/package.json'
5 verbose stack     at Error (native)
6 verbose cwd /home/ekeimaja/Desktop/phaser-es2015-master
7 error Linux 4.0.0-040000-generic
8 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "build" "run"
9 error node v6.2.2
10 error npm  v3.9.5
11 error path /home/ekeimaja/Desktop/phaser-es2015-master/run/package.json
12 error code ENOENT
13 error errno -2
14 error syscall open
15 error enoent ENOENT: no such file or directory, open '/home/ekeimaja/Desktop/phaser-es2015-master/run/package.json'
16 error enoent ENOENT: no such file or directory, open '/home/ekeimaja/Desktop/phaser-es2015-master/run/package.json'
16 error enoent This is most likely not a problem with npm itself
16 error enoent and is related to npm not being able to find a file.
17 verbose exit [ -2, true ]

 

[mattstyles]

You're calling `npm build run`, use `npm run build`.

The `npm run` invokes the script, and the `build` arg tells it which script you want.

[ekeimaja]

Then it gives this error

0 info it worked if it ends with ok
1 verbose cli [ '/usr/local/bin/node', '/usr/local/bin/npm', 'run', 'build' ]
2 info using [email protected]
3 info using [email protected]
4 verbose run-script [ 'prebuild', 'build', 'postbuild' ]
5 info lifecycle [email protected]~prebuild: [email protected]
6 verbose lifecycle [email protected]~prebuild: unsafe-perm in lifecycle true
7 verbose lifecycle [email protected]~prebuild: PATH: /usr/local/lib/node_modules/npm/bin/node-gyp-bin:/home/ekeimaja/Desktop/phaser-es2015-master/node_modules/.bin:/usr/local/bin:/usr/local/sbin:/usr/local/bin:/usr/sbin:/usr/bin:/sbin:/bin:/usr/games:/usr/local/games
8 verbose lifecycle [email protected]~prebuild: CWD: /home/ekeimaja/Desktop/phaser-es2015-master
9 silly lifecycle [email protected]~prebuild: Args: [ '-c', 'npm run clean' ]
10 silly lifecycle [email protected]~prebuild: Returned: code: 1  signal: null
11 info lifecycle [email protected]~prebuild: Failed to exec prebuild script
12 verbose stack Error: [email protected] prebuild: `npm run clean`
12 verbose stack Exit status 1
12 verbose stack     at EventEmitter.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/lifecycle.js:245:16)
12 verbose stack     at emitTwo (events.js:106:13)
12 verbose stack     at EventEmitter.emit (events.js:191:7)
12 verbose stack     at ChildProcess.<anonymous> (/usr/local/lib/node_modules/npm/lib/utils/spawn.js:24:14)
12 verbose stack     at emitTwo (events.js:106:13)
12 verbose stack     at ChildProcess.emit (events.js:191:7)
12 verbose stack     at maybeClose (internal/child_process.js:852:16)
12 verbose stack     at Process.ChildProcess._handle.onexit (internal/child_process.js:215:5)
13 verbose pkgid [email protected]
14 verbose cwd /home/ekeimaja/Desktop/phaser-es2015-master
15 error Linux 4.0.0-040000-generic
16 error argv "/usr/local/bin/node" "/usr/local/bin/npm" "run" "build"
17 error node v6.2.2
18 error npm  v3.9.5
19 error code ELIFECYCLE
20 error [email protected] prebuild: `npm run clean`
20 error Exit status 1
21 error Failed at the [email protected] prebuild script 'npm run clean'.
21 error Make sure you have the latest version of node.js and npm installed.
21 error If you do, this is most likely a problem with the phaser-es2015 package,
21 error not with npm itself.
21 error Tell the author that this fails on your system:
21 error     npm run clean
21 error You can get information on how to open an issue for this project with:
21 error     npm bugs phaser-es2015
21 error Or if that isn't available, you can get their info via:
21 error     npm owner ls phaser-es2015
21 error There is likely additional logging output above.
22 verbose exit [ 1, true ]

 

[mattstyles]

Hmm, thats an issue with npm spawning a child to run its scripts, which implies its an issue with your node setup. To confirm, can you run each command individually?

./node_modules/.bin/rimraf dist && ./node_modules/.bin/mkdirp dist
./node_modules/.bin/browserify src | ./node_modules/.bin/uglifyjs > dist/index.js
cp src/index.html dist/index.html && cp -r src/assets dist/assets

If they all work then its an issue with your node install.

I'm running the same versions as you and on my Mac (node installed from .pkg from nodejs.com) all is happy, I tried on a clean Xenial VM, using nodesource to install latest node (which is 6.3, so slightly newer), and, again, all happy. edit, used nvm to also install your specific version, same, worked without issue so I'm struggling to replicate, which might imply its an issue with your specific node setup.

If you installed node using `sudo` at all in the chain then you'll need to run it with `sudo` almost every time or it wont be privileged enough to run itself (or write to its own directories maybe), but I'm guessing you already know that.

[hexus]

Use this.

I've started a project with it and it's a fantastic starting point. Starting to heavily modify the gulpfile though, might have to start modularising it!

[MarvinB]

Why would I run the tasks myself? That's why something like gulp exists.

But it is not a compiler, that's correct.

 

Just use this as a starting point and strip out the states, its pretty simple:

https://github.com/belohlavek/phaser-es6-boilerplate

[mattstyles]

2 hours ago, MarvinB said:

Why would I run the tasks myself? That's why something like gulp exists.

But it is not a compiler, that's correct.

Thats what scripts are for, its just another abstraction that is unnecessary. Almost everything you run is a program in its own right, you then rely not only on that module, but also on gulp and also on whoever has wrapped the module to work for gulp (or grunt or whatever else). Generally the module is written to work outside of any task runner and its not always trivial to wrap it, adding more potential fail points. You want your processes as simple as possible and use the unix philosophy to chain together processes into new processes, can't do that with wrappers.

Gulp had a real sticking point with how streams are actually supposed to work which knackered a load of modules (maybe still does?), unix pipes are an old and well developed technology, one that node is perfectly able to handle. Adding gulp just complicates things. There is nothing, other than log unification (again dependent on module creators), that task runners handle that creating your own specific processes can not handle.

Take for example, something trivial like minification, what is simpler, to just run the minification process or to wrap it in a module to then fit it into a task runner? What is simpler to debug or modify, one process (preferably one with a well-defined spec i.e. does one thing) or to also have to debug the task runner and the wrapper? In all cases just using the script is the simplest, and therefore most robust solution.

If you can architect a solution with one fail point or one with 3, always always always choose the one fail point, then, when it does fail, you know exactly what to do to fix it.

[MarvinB]

Learned something new. Thank you! 

[webcaetano]

https://github.com/webcaetano/phaser-boilerplate