babel-plugin-angular-annotate
Make angular dependency annotation minification proof
Compatibility
The version 2.x uses babel 6.x plugin API, for babel 5.x versions use the babel-plugin-angular-annotate 1.x
Installation
npm install babel-plugin-angular-annotate
Usage
Via .babelrc
(Recommended)
.babelrc
{
"plugins": [
["angular-annotate", [configurations...]]
]
}
Via CLI
$ babel --plugins angular-annotate script.js
Via Node API
require("babel-core").transform("code", {
plugins: [
["angular-annotate", [configurations...]]
]
});
Known issues
- Some injections wont work properly when using this plugin in conjuction with
babel-preset-es2015
. To get it working you need to use "passPerPreset": true
in your .babelrc
.
Configuration
angular-annotate
accepts a json like injection configuration starting with an array containing two items in this format: [method call, args]
.
method call
is expressed as a string with the service name and method call. For instance "$injector.invoke"
.
You can also nest calls. For instance: "$httpProvider.interceptors.push"
.
args
is where you map each param with the corresponding injection strategy. The two possible are: "$injectFunction"
and "$injectObject"
.
Any other value will be ignored.
$injectFunction
will transform:
function (a, b, c) {
}
to
['a', 'b', 'c', function (a, b, c) {
}]
For instance to create a rule for $injector.invoke
you can apply the following configuration: ["$injector.invoke", ["$injectFunction"]]
.
So the following will be transformed:
Before:
$injector.invoke(function($state) {
$state.go('somewhere');
});
After:
$injector.invoke(['$state', function($state) {
$state.go('somewhere');
}]);
$injectObject
will apply $injectFunction
for each object value. This is mainly used in the resolve
property from some services. For example:
The $routeProvider.when
configuration can be expressed with the following:
["$routeProvider.when", ["_", {
"controller": "$injectFunction",
"resolve": "$injectObject"
}]];
Before:
$routeProvider.when('/foo', {
controller: function($scope) {
$scope.message = 'foo';
},
templateUrl: 'foo.html',
resolve: {
store: function (foo) {
}
}
});
After:
$routeProvider.when('/foo', {
controller: ['$scope', function($scope) {
$scope.message = 'foo';
}],
templateUrl: 'foo.html',
resolve: {
store: ['foo', function (foo) {
}]
}
});
Note that since we don't want to do anything in the routeName we use a "_"
to ignore it.
Presets
Since configuring each service injection can be tedius, this libray includes some presets like: "angular", "ngMaterial", "ngRoute" and "ui.router"
.
So you can simple include the following in .babelrc:
{
"plugins": [
["angular-annotate", ["angular", "ngMaterial", "ui.router"]]
]
}
Check the main file to see what injections are currently handled.
Running Tests
npm test
Contributing
- Fork it
- Create your feature branch (
git checkout -b my-new-feature
) - Commit your changes (
git commit -am 'Add some feature'
) - Push to the branch (
git push origin my-new-feature
) - Create new Pull Request