レガシーブラウザでの ES6+ の利用

Mithril.js は ES5 で記述されていますが、ES6 以降とも完全に互換性があります。最近のブラウザはすべて、ネイティブモジュール構文を含む ES6 以降の機能をネイティブにサポートしています。（Node のような特殊なモジュール解決はサポートしていないため、import * as _ from "lodash-es" のような記述はできません。相対パスと URL パスのみをサポートしています。）そのため、クロージャコンポーネントではアロー関数を、クラスコンポーネントではクラスを自由に使用できます。

しかし、多くの開発者がそうであるように、Internet Explorer のような古いブラウザをまだサポートする必要がある場合は、ES5 にトランスパイルする必要があります。このページでは、Babel を使用して、最新の ES6+ コードを古いブラウザで動作させる方法について説明します。

セットアップ

まず、まだインストールしていない場合は、Node.js がインストールされていることを確認してください。Node.js には npm が同梱されています。これはすぐに必要になります。

ダウンロードしたら、ターミナルを開き、次のコマンドを実行します。

# これをプロジェクトの実際のパスに置き換えてください。スペースが含まれている場合は引用符で囲み、
# Linux/Mac で `$$` が含まれている場合はシングルクォートで囲んでください。
cd "/path/to/your/project"

# すでに `package.json` が存在する場合は、このコマンドをスキップしてください。
npm init

これで、いくつかの異なる方法を選ぶことができます。

• Babel をスタンドアロンで使用し、バンドラーは一切使用しない
• Babel を使用し、Webpack でバンドルする

Babel をスタンドアロンで使用する

まず、必要な依存関係をいくつかインストールする必要があります。

• @babel/cli は、Babel のコア機能と babel コマンドをインストールします。
• @babel/preset-env は、Babel がどのコードをどのようにトランスパイルするかを判断するのに役立ちます。

npm install @babel/cli @babel/preset-env --save-dev

次に、.babelrc ファイルを作成し、@babel/preset-env で設定します。

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

最後に、サポートする必要がある環境に対して非常に具体的な要件がある場合は、Browserslist を構成することをお勧めします。これにより、Babel (およびその他のライブラリ) は、どの機能をターゲットにするかを認識できます。

デフォルトでは、何も構成しない場合、Browserslist は > 0.5%, last 2 versions, Firefox ESR, not dead という妥当なクエリを使用します。多くのポリフィルを使用して IE 8 をサポートする必要があるなど、これを変更する必要がある非常に特殊な状況がない限り、この手順は不要です。

プロジェクトをコンパイルする際は、次のコマンドを実行すれば、すべてがコンパイルされます。

babel src --out-dir dist

毎回覚えて入力する手間を省くために、npm スクリプトを使用すると便利です。package.json の "scripts" オブジェクトに "build" フィールドを追加します。

{
  "scripts": {
    "build": "babel src --out-dir dist"
  }
}

これで、コマンドの入力が簡単になり、覚えやすくなります。

npm run build

Babel を Webpack で使用する

Webpack を使用してバンドルする場合は、セットアップにさらにいくつかの手順が必要です。まず、Babel と Webpack の両方に必要なすべての依存関係をインストールする必要があります。

• webpack は Webpack のコアコードであり、webpack-cli は webpack コマンドを提供します。
• @babel/core は Babel のコアコードであり、babel-loader のピア依存関係です。
• babel-loader を使用すると、Webpack に Babel を使用してファイルをトランスパイルする方法を指示できます。
• @babel/preset-env は、Babel がどのコードをどのようにトランスパイルするかを判断するのに役立ちます。

npm install webpack webpack-cli @babel/core babel-loader @babel/preset-env --save-dev

次に、.babelrc ファイルを作成し、@babel/preset-env で設定します。

{
  "presets": ["@babel/preset-env"],
  "sourceMaps": true
}

次に、サポートする必要がある環境に対して非常に具体的な要件がある場合は、Browserslist を構成することをお勧めします。これにより、Babel (およびその他のライブラリ) は、どの機能をターゲットにするかを認識できます。

デフォルトでは、何も構成しない場合、Browserslist は > 0.5%, last 2 versions, Firefox ESR, not dead という妥当なクエリを使用します。多くのポリフィルを使用して IE 8 をサポートする必要があるなど、これを変更する必要がある非常に特殊な状況がない限り、この手順は不要です。

最後に、webpack.config.js というファイルを作成して Webpack をセットアップします。

const path = require('path');

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

この構成は、アプリケーションのエントリポイントのソースコードファイルが src/index.js にあり、これがバンドルを dist/app.js に出力することを前提としています。

次に、バンドラーを実行するには、次のコマンドを実行します。

webpack -d --watch

毎回覚えて入力する手間を省くために、npm スクリプトを使用すると便利です。package.json の "scripts" オブジェクトに "start" フィールドを追加します。

{
  "scripts": {
    "start": "webpack -d --watch"
  }
}

これで、コマンドの入力が簡単になり、覚えやすくなります。

npm start

本番環境用のビルドでは、スクリプトを minify (コード圧縮) する必要があります。幸いなことに、Webpack に別のオプションを指定して実行するだけです。

webpack -p

これを npm スクリプトに追加して、すばやく簡単にビルドできるようにすることもできます。

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

そして、これを実行すると、少し覚えやすくなります。

npm run build

もちろん、これを自動本番環境ビルドスクリプトでも実行できます。たとえば、Heroku を使用している場合は、次のようになります。

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