JavaScript
Node.js
webpack
babel

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

More than 1 year has passed since last update.

※ 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. ドキュメント