ES2015も普及し始め、Babelを使う機会も多くなってきていると思います。BabelはES2015以降のJavaScriptの標準機能を現状のJavaScriptに変換して、ブラウザで読み込めるようにしてくれるツールです。通常は、gulp、Gruntなどのタスクランナーや、Browserify、Webpackなどのビルドツールと一緒に使うことが多いと思いますが、Babel CLIという「babelのコマンド」だけでもそれなりのことができてしまうのはご存知でしょうか。今回はそのBabel CLIの使い方について紹介します。Babel CLIのドキュメントを元に説明します。
目次
Babel CLIのインストール
まず、Babel CLIはグローバルにインストールすることもできますが、以下の理由によりプロジェクトごとにローカルにインストールすることが推奨されています。
- 同じマシーン内であってもプロジェクトにより異なったバージョンのBabelに依存していることもあり、別々にアップデートできるようにするため。
- 自分の作業環境だけでなく、簡単に別の環境でもセットアップできるようにするため。
以下のコマンドでbabel-cliをローカルにインストールします。(npm環境を整えておく必要があります。)
注意: Babelをグローバルで動かすことは一般的には良いとされていないので、もしグローバルにインストールされているのなら以下のコマンドで削除してしまってもよいです。
インストールが完了すると、package.jsonファイルに以下のように追記されます。
.babelrcファイルの準備
Babel本体のみでは、何も仕事をしません。.babelrcという設定ファイルを用意し、そこにBabelでさせたい処理をプリセットやプラグインとして登録しておく必要があります。
BabelにES2015のコンパイルの処理を行わせる場合は「babel-preset-es2015」というプリセットを使用します。Babelを使用するプロジェクトディレクトリ内で以下のコマンドを実行し、babel-preset-es2015をインストールします。
babel-preset-es2015をインストールしたら、以下のコマンドで{ “presets”: [“es2015”] }を記述した状態で.babelrcファイルを生成します。
babelコマンド
まずは抑えておきたい基本的なbabelのコマンドを説明します。
ファイルをコンパイルする
script.jsファイルをコンパイルし、標準出力にアプトプットします。
任意のファイルにアウトプットしたい場合は、––out-fileまたは-oオプションを使います。
ファイルを変更する度にコンパイルしたい場合(ファイルの監視)は、––watchまたは-wオプションを使います。
ちなみに、実際にターミナルでローカルにインストールしたbabelコマンドを実行する際は、以下のようにコマンドを入力します。
今回の記事全体を通して、便宜的にnode_modules/.bin/の部分を省略して説明をしていますが、実際にターミナルでコマンドを入力する際、node_modules/.bin/をつけて実行してください。
コンパイル時にソースマップを含める
コンパイル時にソースマップファイルを別ファイルとして作成する場合は、––source-mapsまたは-sオプションを使います。
ソースマップについては、以下をご参照ください。
ソースマップをコンパイルしたファイルの中に含める場合は、––source-maps inlineオプションを使います。
ディレクトリごとコンパイルする
ディレクトリ全体を、例えばsrcディレクト内のファイルをすべてコンパイルして、libディレクトリにアプトプットする場合は、––out-dirまたは-dオプションを使います。
srcディレクト内のファイルを一つのファイルに結合する場合は、以下のように––out-fileオプションを使います。
ファイルをパイプする
標準出力を通してファイルをパイプして、script-compiled.jsファイルにアウトプットするには以下のようにします。
応用編
Babel CLIで利用可能なオプションは他にもたくさんあります。––helpオプションで確認するか、オプションのページでご確認ください。
ちなみにオプションの指定の仕方は以下のようになります。
コンパイル時にファイルを圧縮するオプション
ここで一つよく使いそうなコンパイル時にファイルを圧縮するオプションをご紹介します。ファイルを圧縮する場合は、––compact=trueオプションを使います。
npm scriptとして使う
ここまでは、ずっとターミナルにbabelコマンドを入力して実行する方法を紹介してきましたが、毎回ターミナルから実行するのは大変です。そこで最後に、package.jsonのscriptフィールドにコマンドを登録して、npmコマンドを実行する方法を紹介します。
例えば、以下のように監視用(watch)とビルド用(build)のコマンドとしてbabelコマンドを登録します。
npm runコマンドを使って以下のようにコマンドを実行します。
まとめ
以上、一通りbabel-cliの使い方を説明してきました。最初にも述べてようにES2015も普及し始め、Babelを使う機会も多くなってきています。またBabelを使うと、ReactのJSXのコンパイルなども行うこともできます。ぜひ、babel-cliを使ってES2015やReactの勉強をするなり、実際の開発に使用したりしてみてください。
最後に以下の『Web+DB PRESS Vol.87』を紹介しておきます。ES2015の特集が掲載されています。ES2015に関する日本語の書籍はまだそれほど多く出版されていないと思うので、貴重な情報源になるかと思います。
コメント
ピンバック: 【JS】【Node.js】【Babel】EC6,EC5の使い方や変換方法について - 俺のまとめサイト
ピンバック: 【JS】【Node.js】【Babel】EC6,EC5の使い方や変換方法について - 俺のまとめサイト