2016/03/16更新

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

このエントリーをはてなブックマークに追加            

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

画像


目次




Browserifyとは

Browserifyとは、フロントエンドJavaScriptで、nodeのrequiremodule.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・機械学習を中心に発信していきます。気になった方はぜひ、本ブログのRSSTwitterをフォローして頂けると幸いです ^ ^。

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





こんな記事もいかがですか?

[取り組み] フロントエンドでコーディングスピードをアップさせる6つの方法!と思って書いてたら30個も書いちゃった。
[フロントエンド] フロントエンドの入社試験99問!難しいですよ〜w。
[フロントエンド] Webページを表示するテストの際に、通信速度を3Gに制限して表示してみよう
[フロントエンド] スマホ実機でのデバッグ手段を増やす!Macのプロキシを利用して、通信内容を確認する。
[フロントエンド] Chrome 35 Beta の変更点。Touch制御、新しいJavaScript機能、プレフィックスなしのShadowDOM
[フロントエンド]複数アカウントでのテストには、Chromeのユーザー管理を使って、Cookieを切り替えると便利
[フロントエンド] Chrome36βが出た。変更点など。element.animate、HTML Imports、Object.observe、他。
RSS画像

もしご興味をお持ち頂けましたら、ぜひRSSへの登録をお願い致します。