[フロントエンド] nodeモジュール管理がフロントで使えるBrowserifyに入門

こんにちは、@yoheiMuneです。
本日はフロントエンドJavaScriptで、nodeのようなrequireとmodule.exportsを用いたモジュール管理ができるBrowserifyについてブログを書きたいと思います。

目次

Browserifyとは

Browserifyとは、フロントエンドJavaScriptで、nodeのrequireやmodule.exportsを使ってモジュール管理ができる仕組みです。また一部のnodeモジュールもフロントエンドで利用できるようになります。Browserifyを使うことで、モジュール分割して開発したコードを、最終的に1つのJSファイルにコンパイルすることができます。

他にも似たようなものでWebPackがありますが、WebPackはCSSや画像など含めフロントエンド全般に関するツールで、BrowserifyはJavaScriptのモジュール管理に特化したツールです。Browserifyについてはシンプルなところが気に入ってます。

Browserifyのインストール

npmを用いて簡単にインストールすることができます。

# インストール
$ sudo npm install -g browserify

# 以下のコマンドが動けばok
$ browserify

これでインストールは完了です。パッケージ管理システムは便利ですね。

モジュール分割をしてみる

フロントエンドJavaScriptですが、nodeを実装するような感じで実装することができます。例えば以下のように「main.js -> sub1.js -> subsub1.js」のような依存関係を書くことができます。

// main.js
var magicCalc = require('./sub1');
var num = 10;
var result = magicCalc(num);
console.log(result); // 20

// sub1.js
var calculator = require('./subsub1');
module.exports = function (number) {
    return calculator.add(number, number);
}

// subsub1.js
module.exports = {
    add: function (val1, val2) {
        return val1 + val2;
    }
}

こんな感じでモジュール分割して実装できるので、かなり素敵です。

Browserifyでコンパイルする

上記のファイルたちをコンパイルすることで、フロントエンドで利用可能なJavaScriptにすることができます。コンパイルは以下のように行います。

$ browserify main.js -o bundle.js

上記コマンドを実行すると、以下の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){
var calc = require('./sub1');
var num = 10;
var result = calc(num);
console.log(result);
},{"./sub1":2}],2:[function(require,module,exports){
(function (__filename){
var calculator = require('./subsub1')
module.exports = function (number) {
    console.log('__filename', __filename)
    return calculator.add(number, number);
}
}).call(this,"/sub1.js")
},{"./subsub1":3}],3:[function(require,module,exports){
module.exports = {
    add: function (val1, val2) {
        return val1 + val2;
    }
}
},{}]},{},[1]);

中身を読むのは面倒ですが、このコードをHTMLから読み込むことで利用することができます。

Browserifyを使えば、nodeモジュールも利用することができる

Browserifyを使うことで、フロントエンドJavaScriptなのにnodeモジュールをrequireして使うこともできます。例えばBrowserifyのサイトでは、以下の例が示されています。

$ npm install uniq

// uniqというnodeモジュールを使っている
var unique = require('uniq');
var data = [1, 2, 2, 3, 4, 5, 5, 5, 6];
console.log(unique(data)); // [ 1, 2, 3, 4, 5, 6 ]

上記のrequireでは、node_modules配下にインストールしたパッケージを読み込んでいます。それをBrowserifyを使ってコンパイルすることで、フロントでも使えるJavaScriptを生成することができます。

最後に

本日はBrowserifyというフロントエンドJavaScript開発ツールについて書きました。数年前にはフロントエンドでのモジュール管理を悩んでいた覚えがありますが、最近ではBrowserifyやWebpackなど便利なものが増えていいですね！ビルドツールのgulpと組み合わせることで、かなり柔軟に大規模にフロントエンドの開発ができます。

本ブログでは、フロントエンド・Python・機械学習を中心に発信していきます。気になった方はぜひ、本ブログのRSSやTwitterをフォローして頂けると幸いです ^ ^。

最後までご覧頂きましてありがとうございました！