読者です 読者をやめる 読者になる 読者になる

【Mithril.js】Browserifyの導入メモ

はじめに

Browserifyは使い始めた段階だけど、とりあえず便利そうだなとは思ったので導入方法をメモ

導入前のHTML

<script type="text/javascript" src="mithril.min.js"></script>
<script src="navbar.js"></script>
<script src="content.js"></script>
<script src="tabbar.js"></script>
<script src="entrypoint.js"></script>

導入後のHTML

<script src="app.js"></script>

導入前は作ったJavascriptファイルをすべて読み込む必要があるので、規模が大きくなってくるとちょっと現実的ではないかも。
導入後はBrowserifyを使うと必要なファイルを自動的に結合してくれるのでとてもよさそう

インストール

gulpでもgruntでもどちらでもokですが、とりあえずgulpで。

npm install gulp browserify vinyl-source-stream

Javascriptの実装

修正前

コンポーネント(content.js)

var Content = 
{
    controller: function() {
    },

    view: function(controller) {
        return m("div", "コンテンツ");
    }
}

コンポーネント呼び出し側(entrypoint.js)

m.mount(document.getElementById("content"), Content);
修正後

コンポーネント(cotent.js)

var m = require('mithril');                    
                                               
module.exports =                               
{                                              
    controller: function() {                   
        console.log("hoge4");                  
    },                                         
                                               
    view: function(controller) {               
        return m("div", "コンテンツ");
    }                                          
};                                             

コンポーネント呼び出し側(entrypoint.js)

var m = require('mithril');

var content = require("./content");
m.mount(document.getElementById("content"), content);

requireを使えば、後でBrowserifyを使ったときにrequireされたファイルが自動で結合されるのでHTML側であらかじめ読み込んでおく必要がなくなりました。ちなみにMithril.jsさえも読み込む必要がなくなりました。

ビルド実行

gulpfile.js

var browserify = require("browserify");
var source = require("vinyl-source-stream");
gulp.task('browserify', function() {
    browserify({
        entries: ['src/entrypoint.js'] // ★エントリーポイントとなるJavascriptファイル
    })
        .bundle()
        .pipe(source("app.js"))        // ★ ビルド後のファイル名                    
        .pipe(gulp.dest("dest/"))      // ★ ビルドファイルの出力先              
});

最初、ちょっとわかりずらかったのですが、
entrypoint.js内でrequireメソッドが呼ばれると後は数珠形式で関連するファイルが次々に結合されていく形になります。

コマンド実行

./node_modules/.bin/gulp browserify

gruntの場合

やってることはgulpと同じです

Gruntfile.js

module.exports = function(grunt)
{
    grunt.initConfig({
        browserify: {
            dist: {
                src: "compile/entrypoint.js",
                dest: "client/app.js",
            }
        },
    });

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

実行コマンド

./node_modules/grunt-cli/bin/grunt

おわりに

jQueryプラグインとか持ってきた場合は、やっぱりHTML内にscriptタグで読み込む形になるんだろうか、、、
とりあえずそれでもいいのかなとも思いますが、、、もうすこし調べてみようと思います。

以上です