ES2015以降で書かれたAngularJSコードのアノテーションminify対策

まえがき

GruntでBabel+concat+uglifyしているJavaScriptコードをWebpack+Babelで対応できるようにする、
のだけれどもAngularJSアノテーションの対応が少し面倒だった備忘録。

結論

babel-plugin-angularjs-annotateを使う。
https://github.com/schmod/babel-plugin-angularjs-annotate

AngularJSのアノテーション記法

AngularJSでは登録したモジュールを各コンポーネントで利用できる機能があり、
その指定で特有の記法がある。

// aにmoduleA、bにmoduleBのインスタンスが代入される(=DI)
angular.controller('ctrl', ['moduleA', 'moduleB', (a, b) => { // （１）
  // いろいろ
}]);

この際、

angular.controller('ctrl', (moduleA, moduleB) => { // （２）

と関数部分だけでも変数名によりDIされる。
しかしminifyすると変数名が変わってしまいDIできなくなるため、
（１）のようにモジュール名を入れたArray（=アノテーション）にすることで対策する。

アノテーション付与をGruntでタスク化できるgrunt-ng-annotate

このminify対策を自動化するgrunt-ng-annotateというプラグインがあり、
Gruntのタスクで（２）を（１）のように書き換える事ができる。

しかしプラグインの更新が止まっており、
アロー関数やimport/exportを含んだコードがあるとタスクエラー（Ⅰ）となっていた。
なお既存ではng-annotateの前にBabelでES5にトランスパイルされており問題なく実行できていた。

今回の場合はWebpackにBabelの処理も寄せたいが

• Webpack -> ng-annotateの場合はバンドルはされるが、minifyが先になってしまいDIできない
• ng-annotate -> Webpackの場合は（Ⅰ）のためエラー

のためすんなりとは行かなかった。
コード生成だけなら

1. Babelでトランスパイル
2. ngAnnotateアノテーション付与
3. Webpackでbundle+minify

でも出来たが、

• タスク順序に寄る（Grunt依存）
• Webpack時にimport -> requireとなっておりTree Shaking出来ない

のが後々面倒になりそうだったので試行錯誤。

babel-plugin-angularjs-annotateで解決

色々調査した結果

• ng-annotate-webpack-plugin
• ng-annotate-loader
• babel-plugin-angularjs-annotate

があったが、前者二つはimport/exportに対応していないのかエラーとなった。
babel-plugin-angularjs-annotateは期待通りアノテーション付与+ES5+bundle+minifyできた。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        ...
      }
    ]
  ],
  "plugins": ["angularjs-annotate"]
}

Webpackが入ったのでBower -> npmへの移行も見込みが立ったため頑張っていきたい所存。