pzprjs
pzprjs copied to clipboard
use ES6 modules
This changes the pzpr
module to hang together using import ... from ...
(the modern way to do imports nowadays, it seems).
Previously the pzpr
module was build by concating all files together, and then use Grunt to uglify the result. Now there is a single /src/pzpr.js
which import
s all required modules. It's converted to something the browser can use via rollup
. The pzpr.js
file still builds a global pzpr
object, since the UI module and rules.html
expect that. The idea is that nothing changes in the final JS file.
You can kinda use this directly from nodejs now, but support for the ES6 modules seems iffy. mocha
uses the esm
module which works nicely.
notes
- ~~All variants must still be ported. I only did 2 of them so far. Until then tests will break~~ edit: done, and tests pass
- I didn't expand the
git.version
string inpzpr/core.js
yet -
rollup
can do "chunks", if you prefer smaller files over something huge. - modules are in 'strict' mode, which gave some problems with code changing "frozen" objects (which is allowed, but ignored, in non-strict mode). c0158cbd6c9 deals with that
- I had to upgrade travis to use a less ancient node version. I used 10 because that's what I have locally
- I didn't run prettify, since it'll mess up almost every file
deploy
- I made the
rollup
action a makefile target, but there is a rolllup grunt module, so that could be used instead ~~(I had some troubles with it, will try again later)~~ edit: I tried again and fails. Makefile it is. - All variants code is now bundled right in the main pzpr.js, so there is no need to copy them in dist
- Somewhere along the line the
candle
file doesn't get bundled, so that's an explicit copy to ./dist/ now
ES6 modules crash course
Either there are multiple things exported:
var color = "green";
var foo = "bar";
export {color: color, foo: foo}
import {foo} from './library.js'
Or there is a single thing:
var colors = ["green", "red", "infra"];
export default colors
import colors from './colors.js';
Evaluation
I do think using the ES6 modules is a good goal. It's a nice modernization step. It's unfortunately way too many changes for a single PR. What I can do is break this up in smaller PRs, which would still use some concatenation, and then work towards the state in this PR in a few separate, smaller, steps.