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));
};