ES6

Getting Started
Resources
- JSX
- ES6
  - Setup
  - Using Babel with Webpack
- CSS
- Animation
- Testing
- Examples
- 3rd Party Integration
- Path Handling
Key concepts
Social
Misc

Mithril is written in ES5, and is fully compatible with ES6 as well. ES6 is a recent update to JavaScript that introduces new syntax sugar for various common cases. It's not yet fully supported by all major browsers and it's not a requirement for writing an application, but it may be pleasing to use depending on your team's preferences.

In some limited environments, it's possible to use a significant subset of ES6 directly without extra tooling (for example, in internal applications that do not support IE). However, for the vast majority of use cases, a compiler toolchain like Babel is required to compile ES6 features down to ES5.

Setup

The simplest way to setup an ES6 compilation toolchain is via Babel.

Babel requires NPM, which is automatically installed when you install Node.js. Once NPM is installed, create a project folder and run this command:

npm init -y

If you want to use Webpack and Babel together, skip to the section below.

To install Babel as a standalone tool, use this command:

npm install babel-cli babel-preset-es2015 babel-plugin-transform-react-jsx --save-dev

Create a .babelrc file:

{
    "presets": ["es2015"],
    "plugins": [
        ["transform-react-jsx", {
            "pragma": "m"
        }]
    ]
}

To run Babel as a standalone tool, run this from the command line:

babel src --out-dir bin --source-maps

Using Babel with Webpack

If you're already using Webpack as a bundler, you can integrate Babel to Webpack by following these steps.

npm install babel-core babel-loader babel-preset-es2015 babel-plugin-transform-react-jsx --save-dev

Create a .babelrc file:

{
    "presets": ["es2015"],
    "plugins": [
        ["transform-react-jsx", {
            "pragma": "m"
        }]
    ]
}

Next, create a file called webpack.config.js

const path = require('path')

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, './bin'),
        filename: 'app.js',
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            loader: 'babel-loader'
        }]
    }
}

This configuration assumes the source code file for the application entry point is in src/index.js, and this will output the bundle to bin/app.js.

To run the bundler, setup an npm script. Open package.json and add this entry under "scripts":

{
    "name": "my-project",
    "scripts": {
        "start": "webpack -d --watch"
    }
}

You can now then run the bundler by running this from the command line:

npm start

Production build

To generate a minified file, open package.json and add a new npm script called build:

{
    "name": "my-project",
    "scripts": {
        "start": "webpack -d --watch",
        "build": "webpack -p"
    }
}

You can use hooks in your production environment to run the production build script automatically. Here's an example for Heroku:

{
    "name": "my-project",
    "scripts": {
        "start": "webpack -d --watch",
        "build": "webpack -p",
        "heroku-postbuild": "webpack -p"
    }
}