読者です 読者をやめる 読者になる 読者になる

Node.js で Babel を使う

Node.js v6 は ES2015 のほとんどの機能が使えるんだけど ES Modules (import/export) や Async Functions
 (async/await) が使いたくなったので Babel を導入することにした。

% yarn add --dev babel-cli babel-preset-latest babel-polyfill
% echo '{ "presets": ["latest"] }' > .babelrc

package.json にビルド用の npm-scripts を追加

{
  "scripts": {
    "build": "babel src -w -s inline -d lib",
  },
}

最初に読み込むファイルの先頭に以下の一行を追記

require("babel-polyfill");

ビルドを実行

% yarn run build

babel-preset-latest

babel-preset-es2015, babel-preset-es2017, babel-preset-es2017 にはそれぞれの年に策定された feature しか含まれていない。とりあえず何も考えずに全部載せにしたい場合は babel-preset-latest を使えばいい。

babel-polyfill

Async Functions
 (async/await) を使おうと思ったらエラー吐いた。このエラーを潰すために babel-polyfill を入れた。

ReferenceError: regeneratorRuntime is not defined

babel src -w -s inline -d lib

引数 説明
src コンパイル対象のディレクトリを指定
-w ファイルの更新を検知して再コンパイル
-s inline インライン Source Map を使う
-d lib アウトプットするディレクトリを指定

https://babeljs.io/docs/usage/cli/

環境

% babel --version
6.18.0 (babel-core 6.18.0)

% node -v
v6.9.1