≡

Mithril 1.1.0

ES6

MithrilはES6とは完全に互換性があるES5で書かれています。ES6はよく使われる一般的なケースのために新しいシンタックスシュガーを導入するという方法でJavaScriptをアップデートしています。全ブラウザで完全にサポートされているわけではありませんし、アプリケーションを書くための必須要件となっているわけではありませんが、チームによっては使いたがるでしょう。

IEをサポートしない内部向けのアプリケーションなど、限られた環境の中では、追加のツールを導入しないで、ES6のサブセットを直接使って開発することもできます。しかし、ほとんどのユースケースではES6のコードをコンパイルしてES5にダウングレードするBabelのようなコンパイラーツールチェーンが必要になります。

セットアップ

ES6コンパイルツールチェーンをセットアップで一番簡単な方法はBabelを使うことです。

BabelはNode.jsをインストールすると維持でインストールされるnpmが必要です。npmがインストールされたら、プロジェクトフォルダを作り、次のコマンドを入力しましょう:

npm init -y

もしWebPackとBabelを同時に使いたいのであれば、次のセクションまで飛ばしてください。

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を実行するには、次のように起動します:

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

WebPackとBabelを使用する

もしソースコードのバンドルにWebPackをすでに使っているのであれば、次のように設定することでBabelをWebPackに統合できます。

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にあることを想定しています。

バンドラーを実行するにはnpmスクリプトの設定を行います。package.jsonファイルを開き、"scripts"以下に次のstart節を追加します:

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

これでバンドラーをコマンドラインツールから実行できるようになりました:

npm start

本番ビルド

ミニファイされたファイルを生成するには、package.jsonを開き、buildという新しいnpmスクリプトの項目を追加します:

{
    "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"
    }
}
License: MIT. © Leo Horie.