ECMAScript6でangular.js

2015-06-17T01:29:42+09:00 JavaScript angular.js

angular.js(1.x)を使ってるけどJavaScriptをbabel.jsを使ってECMAScript6で書きたい。そういう場合どうすれば良いのか色々調べてみた

※angular.jsアプリケーション全体をES6で書いて検証した訳ではないので本当に問題が無いかは不明

※あくまで開発よりはビルドする方法なネタ

単純に言うと普通に書いて普通に動く。但し、ng-strict-diをした場合には別。つまりES6では

// angular.controller('SampleCtrl', SampleCtrl);
export default class SampleCtrl {
    constructor($scope) {
    }
}

っていうようになる訳だけど、Dependency Injection Annotationどうすんのって話になる。ng-strict-diをしない場合であれば上記のコードでも動く、でもng-strict-diをする場合だと上記の$scopeに対して何を注入するのか明示しなければならないと思うのですが、それはng-annotateっていうのがあるので普通にそれをやれば解決してくれる

require("angular");

class SampleCtrl {

  // @ngInjectをいれなくてもDependency Injection Annotationはされるっぽい
  /* @ngInject */
  constructor($scope) {
    $scope.msg = 'hoge';
  }
}

angular.module('sample', [])
  .controller('SampleCtrl', SampleCtrl);

でこれをどうビルドするのかって所なので

{
  "scripts": {
    "build": "browserify -d app.js | uglifyjs -c > bundle.js"
  },
  "browserify": {
    "transform": [
      "babelify",
      "browserify-ngannotate"
    ]
  },
  "dependencies": {
    "angular": "^1.4.1"
  },
  "devDependencies": {
    "babelify": "^6.1.2",
    "browserify-ngannotate": "^1.0.1",
    "uglifyjs": "^2.4.10"
  }
}

ってな感じでbrowserifyを使いつつbabelifyでES6なコードをトランスパイルしてbrowserify-ngannotateを使ってDependency Injection Annotationを挿入するようなコードを生成する。その結果のソースをuglifyを使って圧縮して出力

という風にやれば良い

MockWebServerRule retrofit