ファイルを連結して任意の変数を公開できるようにするGruntプラグイン「grunt-encase」を作ってみた
JavaScript(特にブラウザ環境)は名前空間やらの概念がないのでファイル分割が大変苦しい。
グローバル汚染を考えて各ファイルを匿名関数(即時実行パターン)にいちいち入れないとダメ。
でもそうするとやたらテストするのが辛くなります。
hogehoge.js
(function(undefined) { var hoge = 10; // hogeはローカル変数 window.publicHoge = 20; // 公開するならグローバルオブジェクトのプロパティにする }).apply(this); // hogehoge-test.jsでhogeをテストしたい場合どうしよう
piyopiyo.js
(function(undefined) { var piyo = 20; // piyoはローカル変数 // ここでhogehoge.jsのhogeを使いたい場合どうしよう }).apply(this); //// piyopiyo-test.jsでpiyoをテストしたい場合どうしよう
こういった問題に対する解決策の中で一番簡単なのが、全部1つのファイルとして書く。
でもファイル分割はしたい。
そこでmakeですよ。
jQueryは結構昔からmake方式(といっても全部のファイルを連結程度の簡単なもの)を採用してました。
そしてGrunt.jsはjQueryが採用しているJavaScript用のビルディングツール。
詳しい内容は他の方のちゃんとした記事を見ていただくとして、
Gruntはプラグインが好きに作れるとのことで、作ってみましたよというお話。
どんなプラグインかというと、各ファイルを連結してブラウザ用やnode用にリリースするためのプラグイン。
ただ、公開する変数をオプションで決めることができます。
連結前の個々のファイルは(ブラウザ環境の場合は)グローバル汚染しまくりコードとなります。
なので、個々のファイルは簡単に独立してテスト可能です。
つまりこんな感じ。
src1.js
// hogeは非公開にしておきたいけど、piyoは公開したい var hoge = 10, piyo = 20;
src2.js
// fugaも公開したい var fuga = 30; // 非公開変数のhogeだけどファイルをまたいで自分だけは使えるようにしたい console.log(hoge);
build.js
// 自動生成されるファイル (function(undefined) { var hoge = 10, piyo = 20; var fuga = 30; console.log(hoge); window.piyo = piyo; window.fuga = fuga; }).apply(this);
これだけならwindow.name = valueの部分を書けばいいんですが、これをnode用にも出荷したいという時。
nodeで変数を公開するにはmodule.exports = objとする必要がある。
このプラグインはそこら辺を自動化して、環境(オプションで指定)がnodeならmodule.exportsに、
環境がブラウザならwindowに公開変数を出してくれます。
まぁ、こんなプラグイン探せばあるかもしれませんが、Gruntのお勉強になったしいいかなー。
簡単な使い方はこちらまで。
明日辺りかなりざっくりしたGruntプラグインの作り方でも書こうかなと思います。誰得ですけども。