angularでng-annotateを利用してminify対策を自動化する

ng-annotate is 何

ng-annotateとは前回書いたangularJSのminify問題に対応するアプリケーションです。 ソースコードを解析して自動的にdependency annotationを付けてくれます。

ng-annotate適用前

angular
  .module('ngAnnotationTestApp', ['ngRoute'])
  .service('HogeService', function($scope){
    //...
    console.log($scope);
  });

ng-annotate適用後

angular
  .module('ngAnnotationTestApp', ['ngRoute'])
  .service('HogeService', ["$scope", function($scope){
    //...
    console.log($scope);
  }]);

もともと同様のアプリケーションにngminというのがあったのですが 今は、「ng-annotateを使ってくれ」となっています。 ※プロジェクト自体が非推奨になっている

angularを使っている人なら大体使ったことが有るであろうyeomanのgenerator-angularも 現行の最新リリースバージョンではngminを利用していますが、 レポジトリにある最新バージョンはng-annotateを利用するように修正されています。

使い方

ng-annotateはnpmでそれ単体でも利用することができますが、 大抵のタスクランナー(gruntやgulp,browserify)用pluginも出ているようです。

今回はお試しなのでstandaloneで動くバージョンを利用してみようと思います。

インストール

npmでグローバルインストールします。

$ npm install -g ng-anntate

インストールするとng-annotateコマンドが利用できるようになります。

実行

以下の様なsyntaxです。

$ ng-annotate OPTION 

例

$ ng-annotate -ar -o app/scripts/app.annotated.js app/scripts/app.js

ng-annotateではDependency Annotateの追加/削除を指定することができます。 追加は-a、削除は-rオプションです。両方指定(-ar)すると作り直しになります。

またデフォルトではファイルは作成せず、標準出力への出力になるので、 ファイルに吐き出す場合は-oオプションを使って下さい。

その他のオプションはいい感じで調べて下さい。

対応しているメソッド

ng-annotateは特定のメソッドやコメントを探してコード変換を行います。 対応しているのは以下らへんです。

.controller, .config, .factory, .directive, .filter, .run, .controller, .provider, .service, .animation and .invoke.

またdirective内のcontrollerプロパティ、$routeProvider.when内部、 ui-router等の一部サードパーティ製ツールにも対応が行われているようです。

また明示的に@ngInjectコメントを付与することでも明示的注釈が追加されます。

var x = /* @ngInject */ function($scope) {};

まとめ

ngAnnotateはもともとパフォーマンスが良いように設計されているらしく、 比較的gruntなどで動かしてもそこまで処理に時間がかかりません

angularのminify問題は結構後に気がつくこともあるので、 こういったもので対策を行っておくのも良いかなと思います。

あと今回は触れませんでしたが、ngAnnotateはpluginも作れるので、 コードをパースして何かの処理を挟み込みたい人は使ってみるのが良いと思います。