Babel の使い方

2020年5月7日 20:05

1. Babel

「Babel」は、最新仕様のJavaScriptを、ブラウザ互換のJavaScriptに変換するコンパイラ。ES2015だけでなく、ReactのJSXなどで書かれたコードからの変換も可能。

(1) Node.jsのインストール
「Node.js の使い方」を参照。

(2) プロジェクトの作成
「Node.js の使い方」を参照。

(3) Babel のインストール

$ npm install babel-cli babel-preset-es2015 --save-dev

(4) Babel の設定ファイル「.babelrc」の作成
プロジェクトフォルダ直下に作成します。

・ .babelrc

{ "presets" : ["es2015"] }

(5) ソースコードの準備
プロジェクトフォルダ直下に「src」フォルダを作成し、ソースコードを配置します。

・ src/index.js

const pow = (n) => n * n
console.log(pow(3))

(5) srcフォルダのコードを変換してdistフォルダに出力。

$ babel src -d dist

"use strict";

var pow = function pow(n) {
  return n * n;
};
console.log(pow(3));

(6) 変換後のコードを実行。

$ node ./dist/index.js
9

・コード変更毎にコード変換: -w
・プログラムのコンパクト化: --compact=true
・ソースマップ: --source-maps

  "scripts": {
    "build": "babel src -d dist",
    "watch": "babel src -w -d dist",
    "start": "node ./dist/index.js"
  },