The easiest way to start using ES6 with your browser tooling



There doesn't seem to be anything that's REALLY simple for how to get started, so I'm going to write it up.

# Note

6to5 changed its name to "Babel" recently. You'll have to use the babel-loader instead here: https://github.com/babel/babel-loader


# Dependencies

We're going to need my favorite build tool, webpack, loaders and their dependencies for it, and whatever libraries I'm using. More on this: http://webpack.github.io/

I use the `6to5-loader` because `6to5` itself comes with a large coverage of ES6 features and does ReactJSX transforms by default (which is very handy). More on this: https://github.com/6to5/6to5-loader, https://6to5.org/

```js
"devDependencies": {
  "6to5-loader": "^0.2.4",
  "react": "^0.12.2",
  "webpack": "^1.4.14"
}
```

Install these by running `npm install -D webpack react 6to5-loader`.


# The build tool

I like webpack a lot. In webpack, there are loaders that do a bunch of stuff to sources you need to get any kind of sources into your project (e.g. ReactJSX style JS files, CoffeeScript, SASS, PNG, raw SVG, etc.).

My configuration for webpack looks something like this:

```js
var webpack = require('webpack');

module.exports = {
  entry: {
    app: './src/app.js'
  },
  output: {
    path: './dist/js',
    filename: 'app.js'
  },
  module: {
    loaders: [{
      test: /.js$/,
      loader: '6to5-loader'
    }]
  }
};
```

Read in `src/app.js`, load it up and its dependencies that match `'.js$'`, with `6to5-loader`, build to `dist/app.js`. Simple enough.


# Writing some code

ES6 import syntax is nice, but it may seem odd at first. Read more about it on the 6to5 page: https://6to5.org/docs/tour/#modules

```js
import * as React from 'react';


var App = React.createClass({
  render: function () {
    return (
      <h1>Hello World</h1>
    )
  }
});

React.render(<App/>, document.body);
```

Hardly demonstrates any real use of ES6 so far here, but that's up to you to do. In the future, we'll be able to use ES6 classes to create React Components instead: http://facebook.github.io/react/blog/2014/03/28/the-road-to-1.0.html#es6


# Building this

I like `make`. It's simple enough to let anyone edit the targets, and it provides a good standard interface across projects. For ruby folks, I'd recommend using `rake` even though it can be a bit more complicated, since you will be using it for other tasks also (like your tests).

Here is the essence of my Makefiles:

```Makefile
WEBPACK_BIN = ./node_modules/.bin/webpack

watch:
	mkdir -p dist
	$(WEBPACK_BIN) --progress -wdc

build:
	mkdir -p dist
	$(WEBPACK_BIN)
```

This way, if someone wants to watch for changes and have them built, webpack's watch (`-w`) feature will cache results from the build and do a very efficient build, with development mode features (`-d`) like sourcemapping. Colors (`-c`) just to make things easier to read.

If someone wants to try out the Real McCoy, just running `make build` will give them the minified complete source with no other big things needed.

For developing side by side with your server application, I recommend using `make dev` to run `build` and your dev server process. If you need files watched, run your dev server process task and `watch` separately. (Substitute `make` with `rake` as necessary for ruby. For rails, you will likely want to add tasks to your `assets:precompile` tasks accordingly.)


# In closing

Hope people picked up something they can start using today from here.