Kokudoriing

技術系与太話ブログ

ファイルを連結して任意の変数を公開できるようにする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.jsjQueryが採用している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プラグインの作り方でも書こうかなと思います。誰得ですけども。