Babelの最小構成を試す
Babelとは?
ブラウザがまだ対応していない最新のJavaScriptのソースコードを、ブラウザが対応しているソースコードへ変換してくれるツールです。 トランスコンパイラとも呼ばれます。
例えば、以下のようなアロー関数を用いたJSはIE11で動作しません。
const sayHello = name => { console.log(`hello ${name}`); }
Babelを用いると、次のようなIE11で動作するコードに変換(トランスパイル)してくれます。
var sayHello = function sayHello(name) { console.log("hello ".concat(name)); };
Babelを使ってソースコードを変換(トランスパイル)してみる
公式サイトを参考にしています。
コマンドラインからBabelを使用して、IE11では動作しないソースコードを、IE11でも動作するソースコードへ変換してみます。 以下がインストールされていることを前提とします。
- node.js
- npm
以下が手順概要です。
- Babelをインストールする
- 手動で必要なファイルを作成する
- コマンドラインからBabelを実行する
- 確認する
1. Babelをインストールする
任意のディレクトリで以下のコマンドを実行します。
mkdir babel-demo
cd babel-demo
npm init -y
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
babel-demoというディレクトリを作り、そのディレクトリをnpmのプロジェクトとして初期化し、Babelをインストールするというコマンド群になります。
2. 手動で必要なファイルを作成する
Babelをインストールしたディレクトリでに以下のファイルとディレクトリを追加します。
- babel.config.js
- /src/main.js
- /lib/
この時点で、以下のようなディレクトリ構造になっているはずです。
│ package.json
│ babel.config.js
│
├─lib
│
├─node_modules
│ └─etc...
└─src
main.js
main.jsの内容
const sayHello = name => { console.log(`hello ${name}`); }
babel.config.jsの内容
const presets = [ [ "@babel/env", { targets: { ie: "11" }, useBuiltIns: "usage", } ] ]; module.exports = { presets };
このファイルはBabelの動作を決定するコンフィグを定義しています。 IE11に対応するソースコードに変換するための設定を記述します。
コマンドラインからBabelを実行する
以下のコマンドを実行します。
npx babel src --out-dir lib
srcディレクトリのファイルを全て変換(トランスパイル)し、libディレクトリに変換後のファイルを配置するというコマンドになります。
確認する
libディレクトリにmain.jsが配置されていることを確認し、ファイルを開いてみます。
以下のようなソースコードが記述されていれば成功です。
"use strict"; var sayHello = function sayHello(name) { console.log("hello ".concat(name)); };