ECMAScript 2015(略:ES2015)以上の言語仕様でJavaScriptを書くことが、昨今のウェブのフロントエンドエンジニアの基本テクニックです。しかし、ECMAScript 2015以上の仕様のJavaScriptで記述すると、Internet Explorer 11など古いブラウザでは動作しないこともあります。そこでBabelなどのトランスパイラと呼ばれるツールを使って、ECMAScript 2015以上の仕様で記述したJavaScriptファイルを互換性のあるECMAScript 5に変換します

トランスパイラとして一番有名なのが「Babel」というツールです。ただ、BabelにはECMAScript Modules(importexport文のこと。以下、ES Modulesと記載)のJSファイルをまとめる機能が提供されていません。そのため、ES ModulesのJSファイルをまとめるモジュールバンドラー(例:webpackRollup等)をBabelと合わせて使うのが一般的です。

このページではトランスパイラのBabelとモジュールバンドラーのwebpackを連携する方法を網羅的に解説します。使い方として次の5種類を解説します。

  • シンプルな使い方
  • webpack + Babel + jQueryの構成
  • webpack + Babel + Reactの構成
  • webpack + Babel + Three.jsの構成
  • ECMAScript 2017仕様を使う方法

※webpackの基本的な使い方は前回の記事「最新版で学ぶwebpack 3入門」を参照ください。

webpack+Babelの構成を作成しよう

webpackとBabelを最小構成で作っていきましょう。

npmモジュールのインストール

webpackとBabelなど必要なモジュールをインストールしましょう。Babelは複数のモジュールを組み合わせて使う形式上、「babel-core」「babel-loader」「babel-preset-env」と3種類を最低限インストールする必要があります。もちろん「webpack」も指定します。

npm install -D webpack babel-core babel-loader babel-preset-env

これをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドを記述しておきます。scriptsdevDependencies以外の情報は省略しています。

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "webpack": "^3.3.0"
  }
}

webpackの設定ファイル:webpack.config.js

webpackの設定ファイルには次のように記述します。rulesの部分でbabel-loaderを指定しているのがポイントです。Babelはプリセットの設定に応じてECMAScriptのバージョンを下位にトランスパイルします。

presetsプロパティーにenvの指定することで、最新仕様(執筆時点ではECMAScript 2017)の構文をECMAScript 5に変換できます。Loaderのオプションの指定が煩雑ですが、presetsプロパティーにenvの指定を忘れないように注意ください。

module.exports = {
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: './src/main.js',
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/build`,
    // 出力ファイル名
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        // 拡張子 .js の場合
        test: /\.js$/,
        use: [
          {
            // Babel を利用する
            loader: 'babel-loader',
            // Babel のオプションを指定する
            options: {
              presets: [
                // env を指定することで、ES2017 を ES5 に変換。
                // {modules: false}にしないと import 文が Babel によって CommonJS に変換され、
                // webpack の Tree Shaking 機能が使えない
                ['env', {'modules': false}]
              ]
            }
          }
        ]
      }
    ]
  },
  // ソースマップを有効にする
  devtool: 'source-map'
};

※プリセット「babel-preset-env」は「ECMAScript 5/6/7 compatibility tables」に基づきターゲットブラウザを指定できたりと様々な機能が提供されています。例えば、ターゲットブラウザがSafari 10だけでよければ、ES5まで落として変換する必要はなく、ES2015(ES6)をターゲットにすれば良いということになります。興味がある方はドキュメントを参考ください。

以上で設定は完了です。npm run buildコマンドを入力すると、srcフォルダに配置したJSファイルがトランスパイルされ、buildフォルダにbundle.jsファイルが出力されます。

ここまでの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。

webpack+Babel+jQueryの構成を作成しよう

jQueryは言わずと知れた汎用的なJSライブラリです。webpackやBabelに興味のあるフロントエンドエンジニアであれば、「いまどき、jQueryを使いたくない」という方もいるかもしれません。しかし、現場では使わざるを得ない状況の方も多いはずです。ここでは、npmモジュールのjQueryをwebpackで取り込む方法について紹介します。

npmモジュールのインストール

必要なモジュールをインストールしましょう。上述のwebpack+Babelの構成と同じです。

npm install -D webpack babel-core babel-loader babel-preset-env 

実行用の「jquery」モジュールもインストールしましょう。こちらは実行ファイルに含まれるモジュールとして利用したいので、コマンドオプション「-S」をつけています。「-S」を指定するとdependenciesにモジュールが記載されます。npm v5以上のユーザーであれば「-S」を省略してもかまいません。

npm install -S jquery

これをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドを記述しておきます。scriptsdevDependenciesdependencies以外の情報は省略しています。

{
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "jquery": "^3.2.1"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "webpack": "^3.3.0"
  }
}

webpackの設定ファイル:webpack.config.js

webpackの設定ファイルには次のように記述します。rulesの部分でbabel-loaderを指定し、excludenode_modulesフォルダーを除外します。

module.exports = {
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: './src/main.js',
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/build`,
    // 出力ファイル名
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        // 拡張子 .js の場合
        test: /\.js$/,
        use: [
          {
            // Babel を利用する
            loader: 'babel-loader',
            // Babel のオプションを指定する
            options: {
              presets: [
                // env を指定することで、ES2017 を ES5 に変換。
                // {modules: false}にしないと import 文が Babel によって CommonJS に変換され、
                // webpack の Tree Shaking 機能が使えない
                ['env', {'modules': false}]
              ]
            }
          }
        ],
        // node_modules は除外する
        exclude: /node_modules/,
      }
    ]
  },
  // ソースマップを有効にする
  devtool: 'source-map'
};

以上で設定は完了です。npm run buildコマンドを入力すると、srcフォルダに配置したJSファイルがトランスパイルされ、buildフォルダにbundle.jsファイルが出力されます。

ここまでの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。

jQueryのサンプルの実行結果は次となります。

webpack+Babel+Reactの構成を作成しよう

Reactはウェブアプリケーションの開発に役立つ人気のJSライブラリです。Reactを例に、npmモジュールをwebpackで取り込む方法について学んでいきましょう。

npmモジュールのインストール

必要なモジュールをインストールしましょう。上述のwebpack+Babelの構成に加えて、トランスパイル用に「babel-preset-react」が必要となります。

npm install -D webpack babel-core babel-loader babel-preset-env babel-preset-react 

実行用の「react」と「react-dom」もインストールしましょう。こちらは実行ファイルに含まれるモジュールとして利用したいので、コマンドオプション「-S」を指定します。

npm install -S react react-dom

これをインストールすると、package.jsonファイルは次の内容になります。scriptsは自前のビルドコマンドを記述しておきます。scriptsdevDependenciesdependencies以外の情報は省略しています。

{
  "scripts": {
    "build": "webpack"
  },
  "devDependencies": {
    "babel-core": "^6.25.0",
    "babel-loader": "^7.1.1",
    "babel-preset-env": "^1.6.0",
    "babel-preset-react": "^6.24.1",
    "webpack": "^3.3.0"
  },
  "dependencies": {
    "react": "^15.6.1",
    "react-dom": "^15.6.1"
  }
}

webpackの設定ファイル:webpack.config.js

webpackの設定ファイルには次のように記述します。rulesの部分でbabel-loaderを指定し、excludenode_modulesフォルダーを除外します。

オプションのプリセットにはenvの指定だけでなく、reactを記述するのがポイントです。これによって、JSXと呼ばれるReact特有のシンタックス(JavaScriptの中にDOM要素を記述する方法)を解釈できるようになります

module.exports = {
  // メインとなるJavaScriptファイル(エントリーポイント)
  entry: './src/main.js',
  // ファイルの出力設定
  output: {
    //  出力ファイルのディレクトリ名
    path: `${__dirname}/build`,
    // 出力ファイル名
    filename: 'bundle.js'
  },
  module: {
    rules: [
      {
        // 拡張子 .js の場合
        test: /\.js$/,
        use: [
          {
            // Babel を利用する
            loader: 'babel-loader',
            // Babel のオプションを指定する
            options: {
              presets: [
                // env を指定することで、ES2017 を ES5 に変換。
                // {modules: false}にしないと import 文が Babel によって CommonJS に変換され、
                // webpack の Tree Shaking 機能が使えない
                ['env', {'modules': false}],
                // React の JSX を解釈
                'react'
              ]
            }
          }
        ],
        // node_modules は除外する
        exclude: /node_modules/,
      }
    ]
  },
  // ソースマップを有効にする
  devtool: 'source-map'
};

以上で設定は完了です。npm run buildコマンドを入力すると、srcフォルダに配置したJSファイルがトランスパイルされ、buildフォルダにbundle.jsファイルが出力されます。

ここまでの手順をサンプルファイルとしてGitHubで公開していますので、参考ください。

サンプルの実行結果は次となります。

次のページでは、Three.jsの設定方法と、ECMAScript 2017のポリフィルの導入方法を紹介します。