Babel CLIのインストール

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

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

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

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

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

.babelrcファイルの準備

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

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

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

babelコマンド

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

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

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

$ babel script.js
# output...

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

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

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

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

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

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

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

• Introduction to JavaScript Source Maps – HTML5 Rocks

ソースマップをコンパイルしたファイルの中に含める場合は、––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コマンドを登録します。

{
  "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"
  }
}

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に関する日本語の書籍はまだそれほど多く出版されていないと思うので、貴重な情報源になるかと思います。