Browserifyでrequireを使ってjavascriptの依存関係をすっきりにしてみる

f:id:bokuweb:20150316192021p:plain

ブラウザ上もでrequire使いたい

現状Coffeeのclassを異なるファイルから参照するにはwindow.HogeClassとか@HogeClassとかでグローバル変数をってたんだけどBrowserifyを使えばNode.js のモジュールのようにrequireで読み込みことができるっぽい。参考記事を見ながら簡単なサンプルを実際に作ってみた。

grunt-cli のインストール

npm install -g grunt-cli

package.jsonを作成

npm init

対話形式でpackage.jsonを作成。必要な情報を入力してください。プロジェクトに必要な情報を記述するjsonファイルが生成されます。

browserify grunt grunt-browserifyのインストール

npm install browserify grunt grunt-browserify --save-dev

--save-devをつけると、package.jsonにインストールした情報が記述が追加されます。 --saveとの違いがわからぬ。完了するとnode_modulesというディレクトリにいろいろ入ってると思います。

Gruntfile.jsの作成

Gruntfile.jsに実行するタスクを記述します。 c.jsからhoge.jsを生成する記述です。

module.exports = function(grunt) {
    grunt.initConfig({
        browserify: {
            sample: {
                files: {
                    "hoge.js": ["c.js"]
                },
            }
        }
    });

    grunt.loadNpmTasks("grunt-browserify");
    grunt.registerTask("default", ["browserify"]);
    };

サンプルソース

・a.js

module.exports = function() {
    console.log('a.js');
};

・b.js

module.exports = function() {
    console.log('b.js');
};

上記のようなa.js、b.jsをc.jsからrequireする

・c.js

(function() {
    var a = require('./a.js');
    var b = require('./b.js');
    a();
    b();
})();

タスクを実行

grunt

無事終えるとhoge.jsが生成されます。

hoge.jsを実行

<!DOCTYPE html>
<html lang="ja">
    <head>
        <meta charset="utf-8">
        <title>browserify test</title>
        <script src="hoge.js"></script>
    </head>
    <body>
    </body>
</html>