【Mithril.js】開発環境をつくる手順まとめ（browserify編）

javascript Mithril.js

はじめに

Mithril.jsでの開発を行うにあたって、いれておいたほうがよさそうなツールとフォルダ構成をメモしておきます

使うツール

・node.js
・gulp.js（grunt.js）
・browserify
全てのjsファイルをしなくても、１ファイル読み込むだけでokになる
・msx
Mithril.js内でのテンプレートの記述がHTMLと同じ形で書きやすい(見やすい)くしてくれるツール
・watch
ファイルの編集を監視して自動でビルド処理を実行してくれるツール

ディレクトリ構成

.
├── src                    // ★ここに開発したファイルをおいていく
├── compile            // msxで変換されたファイルをおく一時フォルダ
├── client                // 最終的な生産ファイル(HTML、CSS、Javascript)
├── node_modules  // node.jsモジュール
└── gulpfile.js（またはGruntfile.js）

こんな形にしてみました。ざっと開発の流れを説明すると
① srcフォルダでJsファイルを編集
② watchで①の編集を監視して、msxを実行（中間ファイルがcompileフォルダ以下に作られる）
③ ②が実行後にBrowserifyがcompile以下のフォルダを結合
④ ③によってclient以下に1つのJavascriptファイルが作られる

src以下のディレクトリ構成

まだ本格的な開発をしていないので後々変わる可能性はあるが、とりあえず以下のような構成を考えています。
まぁ、このへんは個人の趣味とかチームでやるならルールとか決めれば変わってくると思いますが、、、

.
├── entrypoint.js    // エントリーポイント(処理の開始地点)
├── component     // コンポーネント(Controller + View)
│   ├── content.js
│   ├── navbar.js
│   └── tabbar.js
└── model             // Model
    └── user.js

entrypoint.js

var m = require('mithril');

var navbar = require("./component/navbar");
var tabbar = require("./component/tabbar");
var content = require("./component/content");

m.mount(document.getElementById("navbar"), navbar);
m.mount(document.getElementById("tabbar"), tabbar);

m.route(
    document.getElementById("root"), "/content", {
        "/content": content,
    }
);

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

var m = require('mithril');
module.exports =
{
    controller: function() {
        var user = require("../model/user");
    },

    view: function(controller) {
        return <a href="#">リンク</a>
    }
};

user.js(Modelの例)

var m = require('mithril');
module.exports = function(data)
{
    this.id = m.prop(data.id);
    this.name = m.prop(data.name);
};

必要なツールのインストール

npm install mithril        // Mithril.js本体
npm install gulp           // gulp本体
npm install gulp-msx   // HTMLテンプレートをMithril.jsの形式に変換するツール
gulp-watch                  // ファイルの編集を監視するツール
npm install browserify vinyl-source-stream // Browserify

gulpfile.jsによる設定とタスクの実行

gulpfile.js

var gulp = require("gulp");

var msx = require("gulp-msx");
gulp.task('msx', function() {
    gulp.src('src/**/*.js')
        .pipe(msx())
        .pipe(gulp.dest('compile/'))
})

var browserify = require("browserify");
var source = require("vinyl-source-stream");
gulp.task('browserify', function() {
    browserify({
        entries: ['compile/entrypoint.js'] // ビルド対象                     
    })
        .bundle()
        .pipe(source("app.js")) // ビルド後のファイル名                      
        .pipe(gulp.dest("client/")) // ビルドファイルの出力先                
});

// ファイルの編集を監視してmsx、browserifyを実行
gulp.task("watch", function() {
    var targets = [
        'src/**/*.js',
    ];
    gulp.watch(targets, ["msx", "browserify"]);
});

監視を開始

./node_modules/.bin/gulp watch

msxとbrowserifyの導入についてはもう少し詳しく以下にまとめてみました
【Mithril.js】msxの使い方メモ - とりあえずphpとか
【Mithril.js】Browserifyの導入メモ - とりあえずphpとか

おわりに

gulpとかgruntとかこの辺りは久しぶりにやりました。
まだ何も作ってないけど前準備の開発環境つくるだけで1日以上かかりました、、、

日頃からこの辺りはいじっておいたほうがいいですね、、、
本題のMithril.jsについてはこれから勉強しようと思います

以上です