ES6 in Node and in your Browser with Traceur


How to make it work in node

Install traceur and save it to your package.json.

npm install traceur --save

Add the following code to your node entry point, in my case server.js. This will transpile required files to valid ES5 syntax on the fly but ignores your dependencies to not spend time transpiling those.

var traceur = require('traceur');
traceur.require.makeDefault(function(filename) {
  // don't transpile our dependencies, just our app
  return filename.indexOf('node_modules') === -1;
});


require('./src/app.js');

Start the server with node server.js and enjoy the new features.

How to make it work in the browser

It makes sense to transpile your app into a ES5 javascript file once, which is then loaded by a browser in order to not have users waiting for the transpiling process every time. For that I like to use webpack and the traceur-loader package:

npm install --save-dev webpack traceur-loader

Create a webpack.config.js, here I’m using a different entry point src/web/app.js which should be loaded. Webpack will automatically include all required dependencies in the resulting javascript bundle. The most interesting line is the loader definition where all javascript files in the src directory will be run through traceur.

module.exports = {
  entry: {
    bundle: './src/web/app.js'
  },
  output: {
    path: 'build/js',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {test: /src\/.*\.js$/, loader: 'traceur?experimental=true&runtime=true'}
    ]
  }
};

For development I recommend running webpack with the -d flag which generates source maps and the --watch flag to recompile changed files incrementally.

node_modules/.bin/webpack --config webpack.config.js --watch -d --progress

The resulting ES5 javascript file will be in build/js/bundle.js and can be included in a browser:

<script src="build/js/bundle.js" />

See a list of possible language features.

Related Posts

Learning Elixir: My side-project

Learnings from starting on a side-project written in Elixir.

Learning How to Learn – Online Course Notes

My notes for the online course “Learning How to Learn”.

Why the Elixir language has great potential

Elixir enables creating fast, reliable and concurrent modern applications with high productivity

Tips for making screencasts for presentations

As an alternative to live demos you can play screen casts during your tech talk.

Trust and Integrity

My notes for the Speed of Trust by FranklinCovey.

NodeJS: Factory Function Pattern, Dependency Registry and Hot Reloading

This article shows how to combine Factory Functions with a rapid feedback loop using hot reloading.

Better back swiping with the React Native Navigator

Swiping back works only close to the edge by default which can be hard to accomplish. It is easy to optimize this.

How to keep plugins when updating PhpStorm

When updating PhpStorm my plugins seemed to be gone, but you can easily move them over.

Command duration in fish shell

Display how long the last command took and notify when a long running command is finished.

PHPUnit find slow tests

When optimizing your testsuite it can be handy do find out how long each test takes to run. It would be nice to have a list of and how many seconds they took.