Wednesday 24. February 2016
I’ve grown fond of using various ecmascript 6 features on other projects (arrow functions and modules especially), so transpilation of ecmascript 6 was something I really wanted.
Commonly this is the place where people install some sort of build tool1, but I wanted to see if could skip that extra layer of complexity and simply use npm for my needs.
I mean there’s no need to build a mansion if an outhouse will do.
It can even be a fancy outhouse with angel wings.
To solve my three direct requirements (ecmascript 6, concatenation, and on-the-fly transpilation) I needed a total of three external dependencies: babel, browserify, and watchify2.
If you wonder why I needed a module loader (like browserify) in addition to babel it’s because the ecmascript 6 modules aren’t yet supported by browsers, and babel translates them into CommonJS modules by default. Thus I need to resolve the dependencies introduced by these modules, which is hard. So we use a module loader instead!
These three external dependencies come at the cost of 32MB, but that’s just
something we’ll have to live with these days if we want fancy transpiled
ecmascript 6. Adding something like
gulp into the mix not only introduces another
layer of complexity, but it will also signifcantly increase3 the bytes used by our
After installing the dependencies I can add the following to my
And I’m done!
Now I can type
npm run js into my console and write amazing ecmascript 6
compliant code like this4:
Babel will transpile it into ecmascript 5 compliant code, browserify concatenates all my transpiled files into one, and watchify in turn ensures everything is being re-transpiled and concatenated on-the-fly.
Because external dependencies come at a cost, both in terms of complexity and megabytes.