せっかく Gulp に乗り換えたので、AngularJS v.1.x の minify 対策自動化もやっちゃう

JavaScript のフレームワーク AngularJS の話。

すでに Angular v.2 もリリース候補を迎えている最中、ちょっと時代遅れになりつつあるが AngularJS v.1.x の話である。

AngularJS での DI

AngularJS では独自の依存性注入機構 (Dependency Injection, "DI")が用いられている。

例えば次のようなコンストラクタ関数があるとする。

function FooController($http){

...

}

コンストラクタ関数の第一引数の引数名が「$http」になっている点に注目。

これを AngulaJS にコントローラーとして登録したとする。

angular

  .module('myApp',[])

  .constroller('fooController', FooController);

すると、この FooController が new されるときに、ちゃんと第一引数に AngularJS の HTTP サービスオブジェクトが引き渡されるのだ。

これは、引数の "名前" をもとに注入すべきオブジェクトを引き当てて渡してくれる、という AngularJS の DI の仕組みである。

Minify したらダメ!

では、どうやって関数の引数の名前を持ってきてるのか?

それは JavaScript ではユーザー定義の関数は toString で文字列化するとその関数のソース文字列が返ってくる、という仕組みを使っている。

しかしこのように、関数定義のソースコード文字列から引数の名前を判別して、これに基づいて依存性注入しようとすると、お察しのとおり JavaScript コードの縮小化 (Minify) がされると破たんしてしまう。

さきの FooController コンストラクタ関数も、minify すると下記のように引数名が "$http" から "t" に短縮化されてしまうだろう。

function FooController(t) {

...

}

短縮化されたあとの FooController 関数を toString() してそのソース定義の文字列を入手したとしても、わかる引数名は "t" だ。
こうなっては FooController の第1引数に $http サービスオブジェクトを渡さなくてはいけないという情報は失われてしまっている。

Minify するなら依存性注釈かかなきゃダメ!

AngularJS v.1.x ではこの事態を回避するため、コントローラー等として登録する際に、引数の名前を文字列で列記することができるようになっている。

angular

  .module('myApp',[])

  .constroller('fooController', ['$http', FooController]);

この、コンストラクタ引数を別途文字列配列で指定しているのを、"依存性注釈" というらしい。

当然のことながら、文字列リテラルは minify しても変更されない。
AngularJS は、FooController の定義を文字列で入手することなく、controller メソッドに渡された配列内、すなわち依存性注釈から、引数名を安全に割り出すことができる、という寸法だ。

ということで、AngularJS でコントローラーやサービス、フィルタなどなどを登録する際は、minify されることを想定して、前述のとおり依存性注釈を記述することが推奨される。

人がやる作業じゃない!

しかしこれって、けっこう面倒で不毛な作業に感じてしまう。

実際のところ、アプリケーション本体側の TypeScript コードをいじりまわっている最中は、コンストラクタ関数の引数はどんどん変更することが多い。
「あ、やっぱり $q サービスいるじゃん」といった具合に。

そして、コンストラクタ引数の変更のたびに、依存性注釈も編集するのは、二度手間で本当に不毛である。

しかも、依存性注釈ので引数の順番を書き誤るバグとかやらかしてしまうと、本当にフラストレーションが溜まる。

コンストラクタ関数の Minify 前の引数名を、手作業で文字列配列で記述するなんて、
こんな退屈な作業こそ機械化できないのか!?

救世主 "ng-annotate"

...ということで、実はそのような不毛で退屈な作業を自動化してくれるツールがある。

ng-annotate というツールがそれだ。

ng-annotate を使えば、

angular

  .module('myApp',[])

  .constroller('fooController', FooController);

というコードを入力すると、

angular

  .module('myApp',[])

  .constroller('fooController', ['$http', FooController]);

に相当する(※)、依存性注釈付きのコードが自動生成できるのだ。

こうして自動生成したあとの依存性注釈付きコードを minify すればバッチリである。

※ ... 実際に自動生成されるコードはこれとはちょっと違ってて、"$inject" プロパティというものを使ったりしているのだが、詳細は割愛。

自分もようやく ng-annotateを導入

...という大変便利な ng-annotate、実はその存在は 2014年頃から耳にしていた。

しかしついつい「いずれ、そのうち...」などと採用を先送りしてしまっていた。

さてところで、前回の投稿で紹介したとおり、最近になって、タスク自動化ツール「Gulp」を使って TypeScript ソースコードに対応するソースマップを同時生成する Bundle & Minify 構成を構築した。

そして前述の ng-annotate は、Gulp のプラグインも提供されている。

ということで、せっかく Gulp に宗旨替えしたのだからこれを機会にとばかり、依存性注釈の自動生成を私の Gulp による Bundle & Minify 機構に取り込んでみた。

まずは ng-annotate の gulp プラグインである gulp-ng-annotate をプロジェクトにインストールしておく。

> npm install -save-dev gulp-ng-annotate

次に、Bundle & Minify 機構を実装している gulpfile.js を編集。

JavaScript ファイル群を Bundle (= concat, 連結) したあと、Minify (= uglify) するまえのタイミングに、依存性注釈の追加 (= ng-annotate) 処理を挿入する (下記太字の箇所)。

var gulp = require('gulp');

...

var ngAnnotate = require('gulp-ng-annotate');

...

gulp.task('min:js', function () {

  // bundleconfig.json の記述から1要素ごとに、

  // Bunlde & Minify 化のタスクに射影する

  var tasks = bundleconfig.map(function (bundle) {

    var task = gulp.src(bundle.inputFiles, { base: "." })

      .pipe(sourcemaps.init()) // ソースマップ生成機構を仕掛ける

      .pipe(concat(bundle.outputFileName)) // concat で連結(Bundle)

      .pipe(ngAnnotate())                  // 依存性注釈を追加

      .pipe(uglify())                      // uglify で難読&縮小化(Minify)

      .pipe(gulp.dest("."))

      .pipe(sourcemaps.write("./")) // ソースマップを出力

      .pipe(gulp.dest("."));

    return task;

  });

...

※コード全体は こちらの gist に置いてある。

これで、コンストラクタ引数の記述に加えて、AngularJS v.1.x への登録記述でも引数を書かなくてはいけない不毛な作業から解放された。

ほんとに今更感満載だが、とにかく、やってよかった。