---
title: Browserify入門
tags: ["Browserify", "JavaScript"]
categories: ["Programming", "JavaScript", "Browserify"]
date: 2014-12-28T04:51:01Z
updated: 2014-12-28T04:51:01Z
---

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

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

``` bash
$ npm install -g browserify
```

### ソースコード作成
`index.js`で`greeter.js`を読み込んで実行する形式をとってみる。

#### greeter.js

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

module.exports=Greeter;
```

#### index.js

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

### Browserify実行

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

``` bash
$ browserify index.js -o bundle.js
```

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

``` javascript
(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も出力される。

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

結果は

``` javascript
(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==
```


[次](http://blog.ik.am/#/entries/306)に、Gulpでビルドしよう。