TOP > JavaScript >

babelifyで始めるES6

Bableのキャプチャ

前回、「Babelで始めるES6入門」という記事を書きましたが、Babel単体ではES6の注目機能であるimport / exportを利用することができません。

import/export構文はnode.jsのrequire()のようなもので、JavaScriptをモジュール化し管理する為の機能です。

正確にはBabelはimport / export構文をrequire構文に変換してくれるのですが、ブラウザがrequire構文に対応していないため利用できません。

これの対応方法は様々ですが、今回はbabelifyを利用した対応方法について解説します。

babelifyはBrowserifyのtransformでBrowserifyの処理の中にbabelの処理を組み込めるモジュールです。

ちなみに、Browserifyはrequire構文をブラウザでも利用できるようにするためのパッケージです。

つまり、Babelでimport/ export構文をrequire構文に変換し、Browserifyでrequire構文をブラウザでも利用できるように変換することで、import/ export構文が利用できるようになります。

browserifyとbabelifyのインストール

まず以下のコマンドでbrowserifyとbabelifyをインストールします。

babelifyの最新バージョンは7.x系だけど私の環境だと上手く動かないので@6.4を利用し、それに合わせてbrowserifyも@11.0.1を利用します。browserifyはCLIを利用するため-gオプションをつけてインストールします。
(追記事:babelifyでv7.x系を利用する)

sudo npm install --g browserify@11.0.1
sudo npm install --save-dev babelify@6.4.0

今回は以下の様なスクリプトのサンプルを用意してます。

src/app.js

"use strict";
import { Test } from './Test.js';
new Test("Babel");

src/Test.js

export class Test{
	constructor(src) {
		console.log(src);
	}
};

app.jsからimportでTest.js内のTestクラスを取得して実行するサンプルです。

コマンドラインで実行

もっとも簡単なコンパイル方法はコマンドラインで実行する方法。

以下のコマンドを入力すると./dist/app.jsというファイルがコンパイルされて出力されます。

browserify ./src/app.js -t babelify --outfile ./dist/app.js

package.jsonに以下のように登録しておけばnpm run build:jsのコマンドでビルド出来るようになります。

"scripts": {
    "build:js": "browserify ./src/app.js -t babelify --outfile ./dist/app.js"
},

node.jsで実行

babel.jsといったファイルに以下のような内容を記述しておくと「node babel.js」のコマンドでコンパイルが実行されます。

var fs = require("fs");
var browserify = require("browserify");
var babelify = require("babelify");
 
browserify({ debug: true })
  .transform(babelify)
  .require("./src/app.js", { entry: true })
  .bundle()
  .on("error", function (err) { console.log("Error: " + err.message); })
  .pipe(fs.createWriteStream("./dist/app.js"));

gulpで実行

gulpで利用する場合にはvinyl-source-streamをインストールしておきます。vinyl-source-streamはファイルストリームをgulpのファイルストリームに変換するnpmです。

gulpfile.jsに以下のような指定をおこなっておくと「gulp babelify」で実行が可能です。(gulpに関しては、「タスクランナーgulp入門」を参考にしてください)

var gulp       = require('gulp'),
	browserify = require("browserify"),
	babelify   = require("babelify"),
	source     = require("vinyl-source-stream");
 
gulp.task('babelify', function () {
	browserify({
			entries: "./src/app.js",
			extensions: [".js"]
		})
		.transform(babelify)
		.bundle()
		.on("error", function (err) {
			console.log("Error : " + err.message);
			this.emit("end");
		})
		.pipe(source("app.js"))
		.pipe(gulp.dest("./dist"));
});

browserifyのストリームはvinyl-source-streamで変換するまではgulp-plumberなどでエラー制御できません。そのためon("error", function (err) {...})内に「this.emit("end");」と記述してエラー制御を行なっています。

babelでimport/ export構文を利用する方法はbabelify以外にもWebpackを利用する方法などもありますので色々と試してみてください。

スポンサードリンク

2015年11月 2日 09:19
カテゴリー JavaScript

«Babelで始めるES6入門 | メイン | babelifyでv7.x系を利用する»