, ,

[Babel] Babel: ES6 -> ES5 へトランスコンパイルする

公開日: 2016/04/11
更新日: 2018/10/16

Babel v6.x では、.babelrc に Preset を設定する必要があった。
バージョンアップ前と手順が変わっていて、はまってしまった。。。

npm のみを利用。
以下の手順でインストールされた babel のバージョンは 6.6.5。

% $(npm bin)/babel --version
6.6.5 (babel-core 6.7.4)

Contents

ファイル構成

Sample ファイルを src/basic.es6 に設置。

.
├── lib
├── package.json
└── src
    └── basic.es6
src/basic.es6
[1, 2, 3].map(n => n + 1);

babel-cli のインストール

% npm install --save-dev babel-cli

実行

CLI で実行する。

% $(npm bin)/babel src/ -d lib/ -s

結果を確認すると、トランスコンパイルされていない。

lib/basic.js
[1, 2, 3].map(n => n + 1);
//# sourceMappingURL=basic.js.map%

babel-preset-es2015 のインストール

手順を確認したところ、.babelrc に babel-preset-es2015 を設定する必要があった。

% npm install babel-preset-es2015 --save-dev

さらに .babelrc を作成。

% echo '{ "presets": ["es2015"] }' > .babelrc

Preset は必要なプラグインをあらかじめ呼んでくれる機能のようだ。
es2015 以外に react も用意されている。

実行

CLI で実行する。

% $(npm bin)/babel src/ -d lib/ -s

無事トランスコンパイルされた。

lib/basic.js
"use strict";
[1, 2, 3].map(function (n) {
  return n + 1;
});
//# sourceMappingURL=basic.js.map%

補遺

Pluings/Presets について。