babel7 を使用して、javascript をトランスパイルします。
Contents
babel
babel は ECMAScript2015以降のコードを 古いブラウザでも動作する javascript のコードに変換してくれるトランスパイラです 。
導入
npm でインストールします。
babel7 から プリセットが、babel-preset-es2015 babel-preset-es2016 などの指定から @babel/preset-env のスマートプリセットになっています。
@babel/polyfill で polyfill を追加します。
|
1 2 |
npm install --save-dev @babel/core @babel/cli @babel/preset-env npm install --save @babel/polyfill |
設定
設定ファイルは babel.config.js または .babelrc で設定します。
両方併用することもできるようです。
babel.config.js
IE11 をターゲットにする場合
useBuiltIns オプションで必要な pollyfill だけ含めることができます。
|
1 2 3 4 5 6 7 8 9 10 |
const presets = [ ["@babel/env", { targets: { ie: "11" }, useBuiltIns: "usage" }] ]; module.exports = { presets }; |
.babelrc を作成してタスクを設定します。
ブラウザーの市場シェアが0.25％を超えるユーザーに必要なポリフィルとコード変換のみを含める場合
|
1 2 3 4 5 6 7 8 9 10 |
{ "presets": [ [ "@babel/preset-env", { "useBuiltIns": "entry" } ] ] } |
実行
babel を実行します。
下記は、src ディレクトリの a.js を、js ディレクトリに出力します。
|
1 |
$ ./node_modules/.bin/babel src/a.js --out-dir js |
まとめ
今回は、コマンドラインで実行してみましたが、実用的には webpack などと併せることが多いかと思います。その際は、webpack の設定に babel を実行する設定を追加することになります。また、設定ファイルは２つ（プロジェクト全体の構成、ファイル相対構成）あり、どちらかの設定でも、あるいは併用でも使えるそうです。babel 自身は babel.config.js を使用しており、おすすめとのことです。
参考
公式：Babel
設定ファイル：Config Files · Babel