クライアントサイドでもモジュールシステムを実現するBrowserify入門

こんにちは、つみきのフロントエンドエンジニアの佐藤です。

今回は Browserify についてご紹介してみたいと思います。


ぼくは普段、好んで CoffeeScript を用いて JavaScript を書いています。

とてもシンプルに書けて読みやすく、タイプ量も圧倒的に少ないです。また、実行コンテキスト(this)を意図通りにしやすかったり、オブジェクト指向と相性が良く、 class 構文のおかげでうまく設計もしやすくなったりと、とてもオススメです。

設計上、 1 ファイルに 1 クラスで分割して組み立てていくにあたって、依存関係の解決やファイル結合の手間の問題などに悩んでいたところ、 Browserify を試してみて、きれいに解決でき管理の手間も省け、とても効率化されました。

概要

https://github.com/substack/node-browserify

Browserify は Node.js と同じ CommonJS のモジュールシステムをブラウザで実現するもので、 var Hoge = require('hoge'); のようにモジュールをロードして使用することができます。

Node.js の組み込み標準モジュールも同じように require できて使用でき、npm でインストールしたものも、 package.json に記載しておくことでモジュール名のみで require 可能です。

CommonJS

CommonJS は、サーバサイドや Webアプリケーション上などでの JavaScript の標準仕様策定のためのプロジェクトです。

CommonJS is a project with the goal of specifying an ecosystem for JavaScript outside the browser (for example, on the server or for native desktop applications).

 

http://en.wikipedia.org/wiki/CommonJS

現状ではまだ、モジュールシステムやユニットテストに関する仕様くらいしか確定、もしくは認証済みになっていないらしいです。

利用手順

それではまずは、インストールします。(Node はインストール済みとします)

npm install -g browserify

グローバル環境へのインストールを避けたい場合は -g オプションを外してください。

次に ロードするモジュールを用意します。

module.exports に外部で使用したいクラスやオブジェクトを代入します。

// foo.js

module.exports = (function() {
  function Foo(name) {
    this.name = name;
  }

  Foo.prototype.method = function method() {
    return this.name;
  };

  return Foo;
})();

呼び出し側では以下のようにします。ファイルは同階層にあるものとします。

// main.js

var Foo = require('./foo');

var foo = new Foo('sato');
foo.method(); // -> 'sato'

これで下記のように browserify コマンドで実行可能な JavaScript ファイルが出力されます。(Browserify をグローバルにインストールしない場合は、 ./node_modules/.bin/browserify が実行ファイルとして指定可能です)

browserify main.js -o bundle.js

コマンドオプションは以下をご参照ください。

https://github.com/substack/node-browserify#usage

また、実際の開発の際には、 ビルドツールなどと併用するのが便利かと思います。

gulp.js

今回は gulp.js で解説します。 CoffeeScript も利用します。

インストールするモジュールは以下です。

  • gulp
  • browserify
  • coffee-script
  • coffeeify
  • vinyl-source-stream

gulp-browserify というプラグインも存在しますが、 ブラックリスト入りしています。

https://github.com/gulpjs/plugins/blob/master/src/blackList.json#L7

gulp のプラグインブラックリストは、 gulp から認められていないプラグインのリストで、公式サイトでもそのプラグインは検索にヒットしないようになっています。

ブラックリスト入りする理由は様々で、 gulp-browserify に関しては、 browserify を直接使用しましょうということみたいです。

リスト入りする理由は様々なので、場合によっては精査した上で、使用していいかと思いますが、プラグインを選定する一つの基準ではあると思います。

coffee-script は gulp のタスクを CoffeeScript で書くために必要になります。

Browserify transforms という、いろいろな形式のものを Browserify でビルドするためのモジュールが多数公開されていて、 coffeeify もそのうちの一つで、 CoffeeScript ファイルを Browserify でビルドするのに必要になります。

他にも、 6to5ify (ES6で書かれたモジュールをES5に変換してビルド)、 debowerify (Bower 経由でインストールしたものをビルド)、 deAMDify (AMD形式のモジュールをビルド)、 hbsfy (Handlebars プリコンパイル)など様々あり、大抵の環境に適応可能かと思います。

https://github.com/substack/node-browserify/wiki/list-of-transforms

gulpタスク

それぞれインストールします。

npm i -D gulp browserify coffee-script coffeeify vinyl-source-stream

gulpfile.coffee を用意し、タスクを書きます。

# gulpfile.coffee

gulp = require 'gulp'
browserify = require 'browserify'
source = require 'vinyl-source-stream'

gulp.task 'browserify', ->
  browserify
    # 対象エントリーポイント
    entries: ['./main.coffee']

    # 拡張子を指定しておくことで、require時に省略可能
    extensions: ['.coffee', '.js']
  .transform 'coffeeify'
  .bundle()
  .pipe source 'main.js'
  .pipe gulp.dest './dest'

これで gulp browserify でビルドできます。(グローバルに gulp をインストール済みとします)

ファイルの変更監視

watchify モジュールを利用することで、ファイルの変更を監視しつつビルドすることができます。

npm i -D watchify gulp-util

ビルドエラー時のコンソール出力のため、 gulp-util もインストールします。ちなみに、 gulp-util はブラックリストには入っていませんが、現在公式サイトで検索にヒットしないようです。

タスクの例としては以下のようになるかと思います。

# gulpfile.coffee

gulp = require 'gulp'
browserify = require 'browserify'
source = require 'vinyl-source-stream'
watchify = require 'watchify'
util = require 'gulp-util'

opts =
  extensions: ['.coffee', '.js']
  entries: ['./main.coffee']

bundler = watchify browserify(opts)

bundler.transform 'coffeeify'

bundle = ->
  bundler
    .bundle()
    .on 'error', util.log.bind(util, 'Browserify Error')
      .pipe source 'bundle.js'
      .pipe gulp.dest './'

gulp.task 'default', bundle
bundler.on 'update', bundle

デフォルトタスクに登録したので、 gulp で監視開始です。

まとめ

このようなツールのお陰でモジュール管理がとても容易になるかと思います。例え小さい規模だとしても導入することで、修正やスケールに強いコード設計の助けになると思いますので、ぜひお試しいただければと思います。

スマホアプリ制作、Web制作、UIコンサルなどのご依頼はこちら

お問い合わせ