BabelでES2015の自動コンパイル環境を作る(Browserify / gulp / Grunt / webpack)

今年2015年6月にJavaScriptの標準仕様であるECMAScript 2015(ES2015 / ES6)が正式にリリースされ、フロントエンド界隈ではかなり盛り上がってきています。先日のHTML5とか勉強会も『ECMAScript 2015 & 2016特集』というテーマで開催されていました。そうした盛り上がりの中で思うのは、「すでにBabelありきで話が進められている」ということです。Babelも最初のコミットからやっと1年経ったくらいです。まだまだ使い方についてわからない方もいると思うので、ここでまとめておこうと思います。特に使用頻度が高いファイル状態を監視し自動でコンパイルする環境構築方法となります。

はじめに(ES2015とは)

今年2015年6月に、これまで長々と仕様の策定が進められてきたECMAScriptの6thエディションがECMAScript2015(ES2015)として正式にリリースされました。これまでのJavaScript(ECMAScript 5)で指摘されていた弱点を補うべく大幅なパワーアップが図られています。追加された機能の詳細などは以下をご参照ください。

とは言うものの、まだ各ブラウザ側の実装が追いついておらず、ES2015の機能のすべてをブラウザで使うことができないのが実情です。そこで「Babel」の登場です。

Babelとは

babeljs
Babel · The compiler for writing next generation JavaScript

Babelは、新しいJavaScriptの仕様で書かれたソースコードを現状のブラウザで使用できるように変換してくれるツールです。もともと「6to5」という名前で、ES6をES5に変換するためのツールでした。それがES6以降の仕様もサポートしていくことになり今年2015年2月に現在の「Babel」という名称となりました。

Babelの使い方

Babelの使用方法は様々です。いろんなツールと組み合わせて使用することもできます。詳細は以下を参照してください。

中でも、気軽に行えるbabelコマンドを使用する方法を紹介しておきます。まずは、以下のコマンドでBabel(babel-cli)をインストールします。-gオプションを使うと、システムにBabelがインストールされます。

$ npm install -g babel-cli

Babel(babel-cli)をシステムにインストールするとbabelコマンドが使えるようになります。以下のコマンドは、“app.js(返還前のJSファイル)”を、”build.js(変換後のJSファイル)”に変換するコマンドとなります。変換後のファイルを指定する場合は、-oオプションを使います。

$ babel app.js -o build.js

babelコマンドの使い方の詳細については、以下をご参照ください。

様々なツールと組み合わせて自動コンパイル機能を実現する

昨今のJavaScriptの開発において、ファイルの変換、結合や圧縮、依存関係の解決などを行うためにさまざまなツールを使用するのが一般的となってきています。Babelは、そうしたツールと組み合わせて使うことも可能です。中でも使用頻度の多いと思われるBrowserify、gulp、Grunt、webpackの4つのツール上でのBabelの使い方と、ファイルの保存を監視し自動的にコンパイルする方法を紹介したいと思います。

念のため、Node.js、npmが使える環境があることと、それぞれのツールが使えることが前提となります。

.babelrcファイルの準備(Babel v6.0.0以降の場合)

Babel v6.0.0になって仕様が変わりました。Babelを実行する際に、pluginまたはpresetを指定することが必要となりました。上記のCLIでBabelを実行する場合もそうですが、これから説明する各方法でも必要になってくる設定です。Bebel v6.0.0、babelify v7.0.0以降を使用する場合は、以下の設定を行ってください。

babel-preset-es2015のインストール

Bableのes2015用のpreset「babel-preset-es2015」をインストールします。

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

.babelrcファイルの設定

pluginまたはpresetを指定するための.babelrcファイルをプロジェクトディレクトリ内に作成します。

$ touch .babelrc

作成した.babelrcファイルに以下を記載します。

{
  "presets": ["es2015"]
}

基本的な.babelrcの設定は以上です。Browserify、gulp、Grunt、webpackの4つのツール上でのBabelの使い方を説明してきます。

Browserify (watchify) + babelify を使う方法

browserify
Browserify

自分がよく使うのは、このBrowserify (watchify)と組み合わせて使う方法です。設定ファイルもpackage.jsonファイルのみでOKなので手っ取り早く使うことができます。

Browserifyは、ブラウザで使用するJSファイルに対して、requireメソッドを使ったモジュールの読み込みを可能にしてくれるツールです。さらに依存関係を考慮し、複数のJSファイルを1つのファイルにまとめてくれる便利なツールです。

1. watchifyのインストール

watchifyは、Browserifyにファイル監視機能をつけたツールです。wathify自体にBrowserifyが含まれているため、watchifyのインストールでBrowserifyの機能が使えるようになります。以下のコマンドで、watchifyをプロジェクトフォルダ内にインストールします。

$ npm install --save-dev watchify

2. 必要なパッケージのインストール

必要なパッケージは以下となります。

  • babelify: Browserify用の変換ツール。BrowserifyにBabelの機能を追加します。

必要なパッケージを以下のコマンドでプロジェクトフォルダ内にインストールします。

$ npm install --save-dev babelify

ソースマップを出力させるようにするには、exorcistもインストールします。

$ npm install --save-dev exorcist

3. 設定ファイルの記述

使用する設定ファイルは、npm initコマンドを実行した時に生成されるpackage.jsonファイルとなります。package.jsonファイルの”script”の部分に以下を追記します。追記したコマンドは、npm runコマンドで実行できるようになります。

"scripts": {
  "watch": "watchify -t babelify ./src/app.js -o ./dist/build.js"
}
package.json

ソースマップを出力させる場合は、以下のように記述します。

"scripts": {
  "watch": "watchify -t babelify ./src/app.js -o 'exorcist ./build.js.map > ./dist/build.js' -d"
}
package.json

4. 自動コンパイル機能の実行

以下のコマンドを実行すると、自動コンパイル機能が起動します。ファイルを保存する度に、ES2015で書かれたソースコードがbabelによって一般的なJavaScript(ES5)に自動コンパイルされるようになります。

$ npm run watch

自動コンパイル機能を停止する場合は、“control + c”キー(Macの場合)を押します。

gulp + gulp-babel を使う方法

gulpjs
gulp

gulpは、今よく使われているタスクランナーですね。gulpと組み合わせて使う機会も多いかと思います。gulpには監視機能がデフォルトで用意されています。

gulpの詳細については、当ブログでも以下の記事で書いています。

1. gulpのインストール

まず、npm installコマンドに-gオプションをつけて”gulp”をシステムにインストールします。gulpコマンドが使えるようになります。

$ npm install -g gulp-babel

次に、プロジェクトフォルダ内にもgulpをインストールします。

$ npm install --save-dev gulp

2. 必要なパッケージのインストール

必要なパッケージは以下となります。

  • gulp-babel: Babelのgulpプラグインです。gulpでBabelの機能を使用できるようにします。
  • gulp-plumber: ファイルの変更時にエラーが出た場合でも、ファイルの監視を止めないようにするgulpプラグイン

必要なパッケージを以下のコマンドでプロジェクトフォルダ内にインストールします。

$ npm install --save-dev gulp-babel gulp-plumber

ソースマップを出力させるようにするには、gulp-sourcemapsもインストールします。

$ npm install --save-dev gulp-sourcemaps

3. 設定ファイルの記述

gulpの設定ファイルは、gulpfile.jsとなります。gulpfile.jsファイルを作成したら、以下を記述します。

var gulp = require('gulp');
var babel = require('gulp-babel');
var plumber = require('gulp-plumber');
var sourcemaps = require("gulp-sourcemaps"); /* ソースマップを出力させる場合 */

gulp.task('babel', function () {
  return gulp.src('./src/app.js')
    .pipe(plumber())
    .pipe(sourcemaps.init()) /* ソースマップを出力させる場合 */
    .pipe(babel())
    .pipe(sourcemaps.write(".")) /* ソースマップを出力させる場合 */
    .pipe(gulp.dest('./dist'));
});

gulp.task('watch', function () {
  gulp.watch(src, ['babel']);
});

gulp.task('default', ['babel']);
gulpfile.js

4. 自動コンパイル機能の実行

以下のコマンドを実行すると、自動コンパイル機能が起動します。ファイルを保存する度に、ES2015で書かれたソースコードがbabelによって一般的なJavaScript(ES5)に自動コンパイルされるようになります。

$ gulp watch

自動コンパイル機能を停止する場合は、“control + c”キー(Macの場合)を押します。

Grunt + grunt-babel を使う方法

grunt
Grunt

gulpでの使い方も紹介したので、Gruntでの使い方も紹介しておきます。Gruntもタスクランナーです。gulpが登場するまでは定番のタスクランナーでした。

Gruntの詳細については、当ブログでも以下の記事で書いています。

1. Gruntのインストール

まず、npm installコマンドに-gオプションをつけて”grunt-cli”をシステムにインストールします。gruntコマンドが使えるようになります。

$ npm install -g grunt-cli

次に、プロジェクトフォルダ内にgruntをインストールします。

$ npm install --save-dev grunt

2. 必要なパッケージのインストール

必要なパッケージは以下となります。

  • grunt-babel: BabelのGruntプラグインです。GruntでBabelの機能を使用できるようにします。
  • grunt-contrib-watch: ファイルの状態を監視してくれるGruntプラグイン

必要なパッケージを以下のコマンドでプロジェクトフォルダ内にインストールします。

$ npm install --save-dev grunt-babel grunt-contrib-watch

3. 設定ファイルの記述

Gruntの設定ファイルは、Gruntfile.jsとなります。Gruntfile.jsファイルを作成したら、以下を記述します。

grunt.loadNpmTasks('grunt-babel');
grunt.loadNpmTasks('grunt-contrib-watch');

grunt.initConfig({
  babel: {
    options: {
      /* ソースマップを出力させる場合はtrueにする */
      sourceMap: true
    },
    dist: {
      files: {
        /* 変換後のJSファイル: 変換前のJSファイル */
        "./dist/bundle.js": "./src/app.js"
      }
    }
  },
  watch: {
    js: {
      files: ["src/*.js"],
      tasks: ["babel"]
    }
  }
});

grunt.registerTask("default", ["babel"]);
Gruntfile.js

4. 自動コンパイル機能の実行

以下のコマンドを実行すると、自動コンパイル機能が起動します。ファイルを保存する度に、ES2015で書かれたソースコードがbabelによって一般的なJavaScript(ES5)に自動コンパイルされるようになります。

$ grunt watch

自動コンパイル機能を停止する場合は、“control + c”キー(Macの場合)を押します。

webpack + babel-loader を使う方法

webpack_module_bundler
webpack

webpackは、Browserifyと同様、依存関係を解決してくれるツールです。自分はあまりwebpackは使いませんが、webpack派も最近は増えてきているのでwebpackでの使い方も紹介しておきます。

1. webpackのインストール

まず、npm installコマンドに-gオプションをつけて”webpack”をシステムにインストールします。webpackコマンドが使えるようになります。

$ npm install -g webpack

次に、プロジェクトフォルダ内にもwebpackをインストールします。

$ npm install --save-dev webpack

2. 必要なパッケージのインストール

必要なパッケージは以下となります。

  • babel-loader: Babelのwebpackローダーです。webpackでBabelの機能を使用できるようにします。
  • babel-core: babel-loaderを使うために必要なパッケージです。peerDependenciesとなっています。

必要なパッケージを以下のコマンドでプロジェクトフォルダ内にインストールします。

$ npm install --save-dev babel-loader babel-core

3. 設定ファイルの記述

webpackの設定ファイルは、webpack.config.jsとなります。webpack.config.jsファイルを作成したら、以下を記述します。

module.exports = {
  entry: "./src/app.js",
  output: {
    path: "./dist",
    filename: "bundle.js"
  },
  /* ソースマップを出力させる場合は以下を追加 */
  devtool: "inline-source-map",
  module: {
    loaders: [
      {test: /\.js$/, exclude: /node_modules/, loader: "babel-loader"}
    ]
  }
};
webpack.config.js

4. 自動コンパイル機能の実行

以下のコマンドを実行すると、自動コンパイル機能が起動します。ファイルを保存する度に、ES2015で書かれたソースコードがbabelによって一般的なJavaScript(ES5)に自動コンパイルされるようになります。

$ webpack --watch

自動コンパイル機能を停止する場合は、“control + c”キー(Macの場合)を押します。

まとめ

それぞれBrowserify、gulp、Grunt、webpackでのBabelの使い方を紹介してきました。ぜひご自身の用途に併せて参考にしていただければと思います。

ちょうどこの記事を書いている時に、HTML5Experts.jpからも同じような記事が公開されました。こちらの記事も参考になると思いますので紹介しておきます。

後はとにかく実戦でどんどんES2015を使っていくのみですね。ちなみにBabelはReactのJSXのコンパイルにも対応しているので、Reactの開発にもすぐにES2015を取り入れることが可能です。

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

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

コメント一覧

  • 必須

コメント