とりあえず webpack 4 で Babel 6 か 7 を導入する

※ 2018/03/06 現在、正式版の最新が 6 で、ベータ版の最新が 7 です。

1. そもそも Babel とは何か

今のブラウザがサポートしていない最新の js のコードをサポートしている js のコードに変換するツール
→コードを便利に書ける
→嬉しい

2. 準備

参考「とりあえず webpack を使ってみる - Qiita」

webpack は 4 の方が設定が簡単なので 4 で行きます。

package.json

...
  "scripts": {
    "dev": "webpack --mode development --module-bind 'js=babel-loader'",
    "build": "webpack --mode production --module-bind 'js=babel-loader'"
  },
...

3. インストール

3.1. Babel 6

ターミナル

npm install --save-dev babel-core babel-preset-env babel-loader

以下はどちらか 1 つ。

.babelrc

{
  "presets": ["env"]
}

package.json

...
  "babel": {
    "presets": ["env"]
  },
...

3.2. Babel 7

ターミナル

npm install --save-dev @babel/core @babel/preset-env babel-loader@8.0.0-beta.0

※ @babel/loader ではなく babel-loader@8.0.0-beta.0

以下はどちらか 1 つ。

.babelrc

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

package.json

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

参考「GitHub - babel/babel-loader at v8.0.0-beta.2」

4. その他

4.1. Babel 関係のパッケージについて

• babel-cli, babel-core
  • コマンドラインから使うか API を使うかでどちらか 1 つを選択
  • 今回は webpack で babel-loader から API を利用するので後者
  • 今回は関係ないけど、Babel 7 では @babel/cli を使うときに @babel/core も必要
• babel-preset-env
  • babel-preset-es2015, babel-preset-es2016, babel-preset-es2017 が含まれる
  • 設定が色々便利
• babel-polyfill, babel-plugin-transform-runtime
  • ポリフィル。本記事では説明を書かないけど、たぶん必要
  • どちらを使うか迷うぐらいなら後者の方が良いと思う
  • (babel-preset-env 2.0 でポリフィルできるようになるらしい)
• その他
  • 他にも preset や便利なパッケージが沢山ある (babel-preset-react など)
  • ドキュメント参照→「4.3. ドキュメント」

参考「Babel 7 リリースプレビュー - Qiita」
参考「babel-polyfillとbabel-runtimeの使い分けに迷ったので調べた - Qiita」
参考「babel-preset-env 2.0のuseBuiltInsを使ってpolyfillする - Qiita」

4.2. babel-loader のバージョンについて

まぎらわしいですが、以下のような対応になっています。

• babel 6 | babel-loader 7
• babel 7 | babel-loader 8

4.3. ドキュメント

• Babel 6「What is Babel? · Babel」
• Babel 7「What is Babel? · Babel」