【Mithril.js】開発環境をつくる手順まとめ(browserify編)
はじめに
Mithril.jsでの開発を行うにあたって、いれておいたほうがよさそうなツールとフォルダ構成をメモしておきます
使うツール
・node.js
・gulp.js(grunt.js)
・browserify
全てのjsファイルをしなくても、1ファイル読み込むだけで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についてはこれから勉強しようと思います
以上です