何をするツール?
JSコードを別の形のJSコードに変換するツールです。
- 新しい文法を使って書かれたコードを古い文法を使うコードへの変換
- ブラウザーが準拠していないAPIを使うためのpolyfillへの変換
- コードの最適化
など、様々な用途に使えます。
使い方
babelにはコア機能を提供する@babel/coreパッケージと、それをターミナルから操作するための@babel/cliがあります。
まずはこれらをインストールします。
yarn add @babel/core @babel/cli
そして、以下のようにしてbabelを実行します。
./node_modules/.bin/babel src --out-dir dist
上の例だと、srcがソースディレクトリでdistが変換したコードを出力するディレクトリです。
試しに以下のmain.jsを古いブラウザでも動くように変換して見ようと思います。
const addOne = (x) => x + 1;
console.log(addOne(2))
変換する前に、babelに変換ルールを設定する必要があります。今回は「古いブラウザでも動かせるようにする」という目的の下、設定を書きます。
以下の設定は公式サイトのチュートリアルで使用されている設定です。
const presets = [
[
"@babel/preset-env",
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
ie: '16'
},
useBuiltIns: "usage"
]
];
module.exports = { presets };
１つずつ解説していきます。
babelの変換ルールはpluginと呼ばれ@babel/plugin-のような名前のpackageとして提供されます。そして、それらのpluginをまとめたものがpresetsです。
上の例では@babel/preset-envをというpresetsを使っています。
preset-envはアロー関数などの比較的新しいJSの文法を古いバージョンのブラウザでも動作するように変換するpluginをまとめたものです。targetsに渡しているオブジェクトはJSを動作させるブラウザの最低バージョンです。つまり、edgeの17以上やfirefoxの60以上で動くようにコードは変換されます。
useBuiltinsはpolyfillをどのように扱うかのオプションです。
詳しい事は省略しますが、"usage"を指定するとpolyfillが必要なコードが含まれているファイルに、apiを含んだモジュールのimport文を挿入してくれます
./node_modules/.bin/babel main.js --out-dir distを実行するとdist/main.jsというファイルが作成されます。中身はこんな感じです。
"use strict";
var addOne = function addOne(x) {
return x + 1;
};
console.log(addOne(29));
変数addOneに代入しているアロー関数が、functionキーワードを使って定義された関数に変換されている事が分かります。