Browserify: それはrequire()を使うための魔法の杖

JavaScript界のハリーポッターこと「Browserify」が最近元気ですね。Node.js的な var myModule = require('myModule')式の記述が、ブラウザのスクリプトでも使えるようになって、ついでに1ファイルにまとめるのもやってくれるツールです。ポストRequireJSとして期待されています。

ただ、公式ドキュメントがコマンドラインの説明に重点を置いていて、最初これだけだといまいち分かりにくい...。そこで、実際の開発で使いやすいように、ビルドツール(gulp.js)から実行するための最小構成を作ってみようかと思います。(Gruntでも同様のことは可能です)

require!: Bowerも使えます

対象のスクリプトの中身は、例えばこんな感じ。この例では、ModernizrとjQueryと、独自スクリプトを組み込んでいます。外部ファイルを指定するだけでなく、このファイル自体にスクリプトを追記しても構いません。Debowerify(というBrowserifyのプラグイン)を使うと、npmだけじゃなくて bower経由のものも扱える ようになります。←これ重要!

Modernizr = require 'browsernizr' # npm経由
$ = require 'jquery' # bower経由
require './yourscript' # サイト用のスクリプト

# ここに書き足してもOK
console.log 'This page is ' + $('H1').text()

RequireJSみたいに、独自のDSL的な記述を覚える必要はなく、Node使いにはおなじみのrequire()を書くだけです。依存関係は、npm(package.json)と bower(bower.json)に記述しておけばOK。とにかく、簡単...というか、無理がありません。

gulpの最小構成に挑戦!

gulpfileをシンプルに書こうとすると、こんなところかと。gulpの場合、プラグインではなく、このように直接利用することが推奨されています。bundle() の結果は vinyl 経由でgulpに渡すことが可能です。

gulp = require 'gulp'

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

gulp.task 'script', ->
  browserify
    entries: ['./js/src/main.coffee']
    extensions: ['.coffee'] # CoffeeScriptも使えるように
  .bundle()
  .pipe source 'main.js' # 出力ファイル名を指定
  .pipe gulp.dest "./js/" # 出力ディレクトリを指定

※watchfyを使うとファイル監視もできますが、若干長くなるのでここでは割愛します。

設定ファイル

Browserifyのプラグインは、package.json に設定できます。devDependenciesと合わせて記述します。

{
  <略>
  "browserify": {
    "transform": [
      "coffeeify",
      "debowerify"
    ]
  },
  "devDependencies": {
    "coffee-script": "*",
    "vinyl-source-stream": "*",
    "gulp": "*",
    "bower": "*",
    "browserify": "*",
    "coffeeify": "*",
    "debowerify": "*",
    "browsernizr": "*"
  }
}

bower.json に利用したいモジュールを記述します。

{
  <略>
  "dependencies": {
    "jquery": "*"
  }
}

インストールと実行

事前に、gulp・bowerはグローバルにインストール。

$ npm install && bower install

で、まず必要なモジュールをインストールしておきます。その後は、

$ gulp script

とすれば、Browserifyが呼び出しているモジュールを含めて、1ファイルにまとめ上げてくれます。超絶便利。

まとめ: 使おう。

今まで、RequireJSを小規模プロジェクトで使わない理由はただひとつ、 メンドクサかったから。Browserifyなら、最小限の設定と学習コストで使い始められます。これからは、ブラウザでJavaScript使うときもちゃんと依存関係を管理しようと心に誓った次第です。

RequireJS以外にも、今後の動向が気になるものとしてComponentもありますが、今の段階だとエコシステムが出来るか不透明という印象を持ちます(Componentは新しいリポジトリシステム自体を作ろうとしています)。その点、npmやBowerがそのまま使える Browserify は今後も人気を延ばしそうですね。

補足: グローバルインストールは不要です

公式サイトに行くと、

$ npm install -g browserify
$ browserify main.js -o bundle.js

と書かれています。たしかに、これで簡単に動作を試せるのですが、gulp(あるいはgrunt)と使うのであればこのインストールは不要です。プロジェクトの中で使うには、単独ツールではなく、ビルドツールに組み込むほうが使いやすいはず。たぶん。