Babelとは
JavaScriptのアロー関数など、IE11などで使用できないコードを読み込める形に変換するツール。
2020年も終わろうとしているが、あと数年はIE11対応が必要なWebサイトはなくならないのでES6以降のアロー関数などを使用するのであればBabelのようなトランスコンパイラで変換が必須となる。
Babelの使用方法
Babelを使用するにはNode.jsが必要なので推奨版をインストールしておく。
Node.jsをインストールしたらBabelをインストールするためのディレクトリを作成してcdで移動後にnpm init -yを実行後、babelをインストールする。
mkdir btest; cd btest; touch babel.config.json; npm init -y; npm i -D @babel/core @babel/cli @babel/preset-env babel-preset-minify
実行したらpackage.jsonを開いて"scripts"内を以下のように変更する。
"scripts": { "start": "babel src -d dist", "build": "babel src -d build --presets=minify" },
次にbabel.config.jsonを開いて以下のコードを貼り付けて保存する。
{
"presets": ["@babel/preset-env"]
}
これでnpm startを実行した際にsrcフォルダ内のJSファイルがdistフォルダへコンパイルされた状態で書き出される。
例えばsrcフォルダにconst add = (a, b) => a + bのコードが書かれたsample.jsというファイルを保存してnpm startを実行するとdistフォルダ内に以下のコードのsample.jsが書き出される。
"use strict";
var add = function add(a, b) {
return a + b;
};
minifyで書き出す場合はnpm run buildを実行 (buildフォルダへ書き出し)
"use strict";var add=function(c,a){return c+a};
Polyfillを読み込む
Babelで変換すればどんなコードも実行できるようになるわけではない。
Polyfillを読み込まなければPromiseなどは実行できないので、以下のコードをHTML内に貼り付けておく必要がある。
注: @babel/polyfill というものもあるがBabel 7.4以降は非推奨となりcore-jsが推奨されている。
<script src="https://polyfill.io/v3/polyfill.min.js"></script>