ES6

介绍

Mithril 使用 ES5 编写，且与 ES6 完全兼容。ES6 是最新的 JavaScript 语言的标准，为各种常见情况引入了新的语法糖。它并不支持所有主流浏览器，它也不是编写应用所必须的，你可以根据你的喜好来决定是否使用它。

在大多数情况下，为了获得更好的兼容性，我们需要使用一些工具（如 Babel）来把 ES6 编译成 ES5。

安装

编译 ES6 最简单的方式是使用 Babel

独立安装 Babel

确保你已经安装了 Node.js 后，在项目文件夹中执行以下命令来初始化项目：

npm init -y

然后执行以下命令安装 Babel：

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

安装完后会创建 .babelrc 文件：

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

然后在命令行中运行：

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

通过 Webpack 使用 Babel

如果你的项目已经使用了 Webpack，你可以按以下步骤把 Babel 集成到 Webpack 中。首先执行以下命令安装 Babel：

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

安装完后会创建 .babelrc 文件：

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

然后，创建一个 webpack.config.js 配置文件：

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

这个配置文件设置了应用的入口文件为 src/index.js，且打包后输出到 bin/app.js。

要运行 bundler，需要设置一个 npm 脚本。打开 package.json 文件并在 "scripts" 中添加一行命令：

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

现在，可以在命令行中执行以下命令来运行 bundler：

npm start

生产环境构建

要压缩生成的文件，请打开 package.json 文件，并添加一个新的 npm 脚本 build：

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

在生产环境中,你可以使用钩子来自动运行构建脚本。这是一个使用 Heroku 的例子：

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