maesblog

Babel CLI(babelコマンド)の使い方

ES2015も普及し始め、Babelを使う機会も多くなってきていると思います。BabelES2015以降のJavaScriptの標準機能を現状のJavaScriptに変換して、ブラウザで読み込めるようにしてくれるツールです。通常は、gulp、Gruntなどのタスクランナーや、Browserify、Webpackなどのビルドツールと一緒に使うことが多いと思いますが、Babel CLIという「babelのコマンド」だけでもそれなりのことができてしまうのはご存知でしょうか。今回はそのBabel CLIの使い方について紹介します。Babel CLIのドキュメントを元に説明します。

babeljs

Babel CLIのインストール

まず、Babel CLIはグローバルにインストールすることもできますが、以下の理由によりプロジェクトごとにローカルにインストールすることが推奨されています。

  1. 同じマシーン内であってもプロジェクトにより異なったバージョンのBabelに依存していることもあり、別々にアップデートできるようにするため。
  2. 自分の作業環境だけでなく、簡単に別の環境でもセットアップできるようにするため。

以下のコマンドでbabel-cliをローカルにインストールします。(npm環境を整えておく必要があります。)

$ npm install --save-dev babel-cli

注意: Babelをグローバルで動かすことは一般的には良いとされていないので、もしグローバルにインストールされているのなら以下のコマンドで削除してしまってもよいです。

$ npm uninstall --global babel-cli

インストールが完了すると、package.jsonファイルに以下のように追記されます。

{
  "name": "my-project",
  "version": "1.0.0",
  "devDependencies": {
    "babel-cli": "^6.0.0"
  }
}
package.json

.babelrcファイルの準備

Babel本体のみでは、何も仕事をしません。.babelrcという設定ファイルを用意し、そこにBabelでさせたい処理をプリセットやプラグインとして登録しておく必要があります。

BabelにES2015のコンパイルの処理を行わせる場合は「babel-preset-es2015」というプリセットを使用します。Babelを使用するプロジェクトディレクトリ内で以下のコマンドを実行し、babel-preset-es2015をインストールします。

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

babel-preset-es2015をインストールしたら、以下のコマンドで{ “presets”: [“es2015”] }を記述した状態で.babelrcファイルを生成します。

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

babelコマンド

まずは抑えておきたい基本的なbabelのコマンドを説明します。

ファイルをコンパイルする

script.jsファイルをコンパイルし、標準出力にアプトプットします

$ babel script.js
# output...

任意のファイルにアウトプットしたい場合は、out-fileまたは-oオプションを使います。

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

ファイルを変更する度にコンパイルしたい場合(ファイルの監視)は、watchまたは-wオプションを使います。

$ babel script.js --watch --out-file script-compiled.js

ちなみに、実際にターミナルでローカルにインストールしたbabelコマンドを実行する際は、以下のようにコマンドを入力します。

#Mac / Linuxの場合
$ node_modules/.bin/babel script.js

#Windowsの場合
>node_modules¥.bin¥babel script.js

今回の記事全体を通して、便宜的にnode_modules/.bin/の部分を省略して説明をしていますが、実際にターミナルでコマンドを入力する際、node_modules/.bin/をつけて実行してください。

コンパイル時にソースマップを含める

コンパイル時にソースマップファイルを別ファイルとして作成する場合は、source-mapsまたは-sオプションを使います。

$ babel script.js --out-file script-compiled.js --source-maps

ソースマップについては、以下をご参照ください。

ソースマップをコンパイルしたファイルの中に含める場合は、source-maps inlineオプションを使います。

$ babel script.js --out-file script-compiled.js --source-maps inline

ディレクトリごとコンパイルする

ディレクトリ全体を、例えばsrcディレクト内のファイルをすべてコンパイルして、libディレクトリにアプトプットする場合は、out-dirまたは-dオプションを使います。

$ babel src --out-dir lib

srcディレクト内のファイルを一つのファイルに結合する場合は、以下のようにout-fileオプションを使います。

$ babel src --out-file script-compiled.js

ファイルをパイプする

標準出力を通してファイルをパイプして、script-compiled.jsファイルにアウトプットするには以下のようにします。

$ babel --out-file script-compiled.js < script.js

応用編

Babel CLIで利用可能なオプションは他にもたくさんあります。helpオプションで確認するか、オプションのページでご確認ください。

ちなみにオプションの指定の仕方は以下のようになります。

$ babel --オプション名=値

コンパイル時にファイルを圧縮するオプション

ここで一つよく使いそうなコンパイル時にファイルを圧縮するオプションをご紹介します。ファイルを圧縮する場合は、compact=trueオプションを使います。

$ babel script.js --compact=true -o script-compiled.js

npm scriptとして使う

ここまでは、ずっとターミナルにbabelコマンドを入力して実行する方法を紹介してきましたが、毎回ターミナルから実行するのは大変です。そこで最後に、package.jsonscriptフィールドにコマンドを登録して、npmコマンドを実行する方法を紹介します。

例えば、以下のように監視用(watch)ビルド用(build)のコマンドとしてbabelコマンドを登録します。

{
  "name": "my-project",
  "version": "1.0.0",
  "scripts": {
    "watch": "babel ./src/app.js -w -o ./js/func.js",
    "build": "babel --compact=true ./src/app.js -o ./js/func.js",
  },
  "devDependencies": {
    "babel-cli": "^6.0.0"
  }
}
package.json

npm runコマンドを使って以下のようにコマンドを実行します。

# 監視用のコマンドを実行
$ npm run watch

# ビルド用のコマンドを実行
$ npm run build

まとめ

以上、一通りbabel-cliの使い方を説明してきました。最初にも述べてようにES2015も普及し始め、Babelを使う機会も多くなってきています。またBabelを使うと、ReactのJSXのコンパイルなども行うこともできます。ぜひ、babel-cliを使ってES2015やReactの勉強をするなり、実際の開発に使用したりしてみてください。

最後に以下の『Web+DB PRESS Vol.87』を紹介しておきます。ES2015の特集が掲載されています。ES2015に関する日本語の書籍はまだそれほど多く出版されていないと思うので、貴重な情報源になるかと思います。

WEB+DB PRESS Vol.87
  • 『WEB+DB PRESS Vol.87』
  • 著者: 佐藤鉄平(著), 小林明大(著), 石村真吾(著), 坂上卓史(著), 上原誠(著), 他13名
  • 出版社: 技術評論社
  • ページ数: 168ページ
  • 発売日: 2015年7月25日
  • ISBN: 978-4774173702

関連記事

コメント

  1. ピンバック: 【JS】【Node.js】【Babel】EC6,EC5の使い方や変換方法について - 俺のまとめサイト

     

  2. ピンバック: 【JS】【Node.js】【Babel】EC6,EC5の使い方や変換方法について - 俺のまとめサイト

     

  • 必須

コメント