the other dell

A comfortable workflow

Mar 10, 2016

Tooling and workflows for JavaScript change with the wind. This simple set-up is a current favorite. It’s ideal for quick prototypes and hurried experiments. You could easily extend it with linting, templating, CSS tooling and so on if you felt so inclined. I’m very keen on the “npm only” approach at the moment

npm init -y
npm install browserify watchify livereloadx babelify --save-dev

This sets up a collection of tools which together provide these development niceties:

  • write in ES2015 and have it transpiled to ES5
  • build using modular code, using the ES2015 import and export syntax
  • serve static files from a directory
  • watch for changes to your JavaScript source and re-trigger the transpilation when a file is saved

To provide all this goodness, the package.json file (created with npm init -y above) needs to contain some scripts:

  "scripts": {
    "serve": "livereloadx -s build/",
    "build": "browserify src/exercise.js -t babelify --outfile build/index.js",
    "watch": "watchify src/exercise.js -t babelify --outfile build/index.js"
  }

These scripts can be run like so:

npm run serve
  • npm run serve will start a webserver statically serving the in “build/” (i.e. the expectation is the files will not be processed by the webserver). You can specify a port, but the default is 35729.
  • npm run build does a one-time build of the JavaScript. First it passes files through the Babel transpiler, meaning that scripts can be written in ES2016. Next it packages all dependancies into a single file. This isn’t usually neccessary for a prototype but it’s a comfortable practice and you get a bit of syntax checking for free because Browserify and Babel wont be able to work on badly formed files.
  • npm run watch does the same as build, but watches the source directory for changes. This script will not return control to the command line, so if you want to do any other command line work, you’ll need to spawn a new shell.

You’ll also need to have an “index.html” in the directory specified for livereloadx. It can be as simple as you like:

<main>Hello, world!</main>
<script src="index.js"></script>

This isn’t valid HTML5, but it will work for that hasty demo or prototype.

I find it helpful to use multiple shell sessions, running the watch and serve tasks in their own session, so that JS updates are automatically reflected in a browser.

If TypeScript is your thing, you could swap out babelify for tsify in the npm install command, above. You would need to tweak the scripts, too:

  "scripts": {
    "serve": "livereloadx -s build/",
    "build": "browserify src/exercise.ts -p tsify --outfile build/index.js",
    "watch": "watchify src/exercise.ts -p tsify --outfile build/index.js"
  }

If Browserify or Babel claim you can’t import/export

From Babel v6 onwards, you’ll need to explicitly install and specify all required transformations. For the ES2015 to ES5 transpilation described above, you’ll need to add a Babel preset:

npm install --save-dev babel-preset-es2015

… and a .babelrc file:

{
  "presets": ["es2015"]
}

Thanks to this Stack Overflow discussion for reminding me of the change.