【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
