1分でわかるBabelとPolyfillを使用したトランスコンパイル

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>