IK.AM

JavaScriptの依存関係解決のためにBrowserifyを試す。 この記事ではnpmがインストールされていることを前提にしている。

Browserifyインストール

後にGulpでビルドするのでこれは必須ではないのであるが、まず最初に試すのにbrowserifyを使うと良い気がする。

$ npm install -g browserify

ソースコード作成

index.jsでgreeter.jsを読み込んで実行する形式をとってみる。

greeter.js

function Greeter(greeting) {
    this.greeting = greeting;
};
Greeter.prototype.greet = function() {
    return 'Hello ' + this.greeting + '!';
};

module.exports=Greeter;

index.js

var Greeter = require('./greeter.js');
var greeter = new Greeter('World');
console.log(greeter.greet());

Browserify実行

requireを解決して、1つのファイルにまとめる。

$ browserify index.js -o bundle.js

できたファイルはこんな感じ。

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
function Greeter(greeting) {
    this.greeting = greeting;
};
Greeter.prototype.greet = function() {
    return 'Hello ' + this.greeting + '!';
};

module.exports=Greeter;

},{}],2:[function(require,module,exports){
var Greeter = require('./greeter.js');
var greeter = new Greeter('World');
console.log(greeter.greet());
},{"./greeter.js":1}]},{},[2]);

-dをつけるとSourceMapも出力される。

$ browserify -d index.js -o bundle.js

結果は

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
function Greeter(greeting) {
    this.greeting = greeting;
};
Greeter.prototype.greet = function() {
    return 'Hello ' + this.greeting + '!';
};

module.exports=Greeter;

},{}],2:[function(require,module,exports){
var Greeter = require('./greeter.js');
var greeter = new Greeter('World');
console.log(greeter.greet());
},{"./greeter.js":1}]},{},[2])
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3Vzci9sb2NhbC9saWIvbm9kZV9tb2R1bGVzL2Jyb3dzZXJpZnkvbm9kZV9tb2R1bGVzL2Jyb3dzZXItcGFjay9fcHJlbHVkZS5qcyIsImdyZWV0ZXIuanMiLCJpbmRleC5qcyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQTtBQ0FBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTtBQUNBO0FBQ0E7QUFDQTs7QUNSQTtBQUNBO0FBQ0EiLCJmaWxlIjoiZ2VuZXJhdGVkLmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXNDb250ZW50IjpbIihmdW5jdGlvbiBlKHQsbixyKXtmdW5jdGlvbiBzKG8sdSl7aWYoIW5bb10pe2lmKCF0W29dKXt2YXIgYT10eXBlb2YgcmVxdWlyZT09XCJmdW5jdGlvblwiJiZyZXF1aXJlO2lmKCF1JiZhKXJldHVybiBhKG8sITApO2lmKGkpcmV0dXJuIGkobywhMCk7dmFyIGY9bmV3IEVycm9yKFwiQ2Fubm90IGZpbmQgbW9kdWxlICdcIitvK1wiJ1wiKTt0aHJvdyBmLmNvZGU9XCJNT0RVTEVfTk9UX0ZPVU5EXCIsZn12YXIgbD1uW29dPXtleHBvcnRzOnt9fTt0W29dWzBdLmNhbGwobC5leHBvcnRzLGZ1bmN0aW9uKGUpe3ZhciBuPXRbb11bMV1bZV07cmV0dXJuIHMobj9uOmUpfSxsLGwuZXhwb3J0cyxlLHQsbixyKX1yZXR1cm4gbltvXS5leHBvcnRzfXZhciBpPXR5cGVvZiByZXF1aXJlPT1cImZ1bmN0aW9uXCImJnJlcXVpcmU7Zm9yKHZhciBvPTA7bzxyLmxlbmd0aDtvKyspcyhyW29dKTtyZXR1cm4gc30pIiwiZnVuY3Rpb24gR3JlZXRlcihncmVldGluZykge1xuICAgIHRoaXMuZ3JlZXRpbmcgPSBncmVldGluZztcbn07XG5HcmVldGVyLnByb3RvdHlwZS5ncmVldCA9IGZ1bmN0aW9uKCkge1xuICAgIHJldHVybiAnSGVsbG8gJyArIHRoaXMuZ3JlZXRpbmcgKyAnISc7XG59O1xuXG5tb2R1bGUuZXhwb3J0cz1HcmVldGVyO1xuIiwidmFyIEdyZWV0ZXIgPSByZXF1aXJlKCcuL2dyZWV0ZXIuanMnKTtcbnZhciBncmVldGVyID0gbmV3IEdyZWV0ZXIoJ1dvcmxkJyk7XG5jb25zb2xlLmxvZyhncmVldGVyLmdyZWV0KCkpOyJdfQ==

次に、Gulpでビルドしよう。