babel

このエントリーをはてなブックマークに追加
Pocket
LINEで送る

babel

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

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

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

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

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

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

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

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

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

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

おー便利だ。

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

SourceMapを使うことで変換前のコードと変換後のコードを対応付けることができるため、実行時に問題が発生しても元のソース上でどこに問題があったのかを容易に把握することができます。

BabelのsourceMapsオプションはソースコードと同時にsourceMapファイルを出力することができ、trueを指定した場合変換後のソースとは別にsourceMapファイルを、”inline”を指定した場合変換後のソースファイルにsourceMapファイルを埋め込んで出力できます。

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

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

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

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

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

このエントリーをはてなブックマークに追加
Pocket
LINEで送る

Leave a comment

Your email address will not be published.


*