babel

babel

babel-cliは、コマンドラインで使えるやつらしい。

$ npm i -g babel-cli

es2015に変換するには、babel-preset-es2015が必要らしい。

$ npm -i babel-preset-es2015 --dev-save

さらに、.babelrcというファイルに、presetを記載する必要があるらしい。

{
  "presets": ["es2015"]
}

下記を実行したら、es2015に変換された。

$babel hoge.js

react用のやつもためしてみる。 reactのjdx使っているコードかいて$babel hoge.jsとやっても今はエラーになる。 .babelrcのpresetsにreactを追加して、下記を実行すると変換できた。

$ npm i --save-dev babel-preset-react
$ babel hoge.js

babelのドキュメントに色々使い方が書いてある。

出力ファイルを指定できるらしい。

$ babel hoge.js --out-file script.js

npmのscriptで実行できるか試してみる。 package.jsonに下記のbabelを追加する。

"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "babel": "babel hoge.js --out-file script.js"
},

下記で、babelを実行したらできた。--out-fileは、-oでもいいらしい。

$ npm run babel

あと、ウォッチもできるらしい。--watchだけど、-wでもいいらしい。

$babel hoge.js -w -o script.js

おー便利だ。

ソースマップというのも出力できるらしい。 参考：Babelで始める！モダンJavaScript開発

SourceMapを使うことで変換前のコードと変換後のコードを対応付けることができるため、実行時に問題が発生しても元のソース上でどこに問題があったのかを容易に把握することができます。 BabelのsourceMapsオプションはソースコードと同時にsourceMapファイルを出力することができ、trueを指定した場合変換後のソースとは別にsourceMapファイルを、”inline”を指定した場合変換後のソースファイルにsourceMapファイルを埋め込んで出力できます。

デバッグしたりするときに便利なんでしょうか。とりあえず出力してみる。

$ babel hoge.js -o script.js --source-maps

script.js.mapというのが出力された。jsファイル毎に元になるファイルを教えてくれるやつらしい。

--out-dirというのはコンパイルしてくれるらしい。-dでもいいらしい。

$ babel src -d lib

これは、src内のjsファイルをすべて変換して、libに出力してくれる。ファイル名は同じ。

$ babel src --out-file lib/script.js

--out-fileは、ディレクトリ内のjsファイルを一つのファイルに出力してくれる。