Supertrue walfo

Browserify, 簡単なモジュール管理

モジュラーな JavaScript を書こう。Browserify の簡単な使い方。

Browserify

[ぶらうぜり-ふぁい]

役割

  • モジュールの管理
  • CommonJS 寄りの仕様
  • 作業側で動作

一言で言うと、「依存ファイルを require して、一緒くたに吐き出すよ」 という感じかなと。

使い方

インストール

$ sudo npm install -g browserify

実装

// main.js

// 依存ファイルを Require
// 1. パスで取得
var foo = require('./js/foo.js');
// 2. node_modules から取得
var unique = require('uniq');
// 3. bower_components から取得 (* debowerify が必要)
var $ = require('jquery');
var _ = require('underscore');

var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data));

$('.test').html(foo.add(10, 10));
//foo.js
module.exports = {
  add: function(a, b) {
    return a + b;
  }
};

コンパイル

$ browserify main.js -o bundle.js
# もしくは browserify main.js > bundle.js

# bower components を使っている場合は, 
$ browserify -t debowerify main.js -o bundle.js

補足

  • module.exports にはオブジェクトを渡す(CommonJS仕様)
  • 実際に使うときはファイルを watch して使う

リンク

2015年7月8日 10:55
2015年7月8日 12:17 編集済み