Pocket
LINEで送る

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ファイルを一つのファイルに出力してくれる。

Pocket
LINEで送る

カテゴリー: プログラミング

1件のコメント

npmでパッケージ管理 - Logicky Blog · 10/14/2016 17:51

[…] ← babel […]

コメントください

関連記事

プログラミング

cakePHP2 – 多言語化

多言語化します。 cakephpマニュアルのこのページに説明が書いてあ 続きを読む …

プログラミング

Go言語によるビットコインのフルノード実装btcdを調べる(2)

btcdを実行した際のプログラムの流れを最初から確認してみます。 se 続きを読む …

%d人のブロガーが「いいね」をつけました。