在使用 AngularJS 和 Webpack 构建应用程序时，经常遇到一个问题：代码压缩后，AngularJS 的依赖注入会失效。为了解决这个问题，我们可以使用 ng-annotate-webpack-plugin 这个 npm 包来自动注入依赖。
安装
使用 npm 安装 ng-annotate-webpack-plugin：
npm install ng-annotate-webpack-plugin --save-dev
使用
在 webpack 配置文件中，引入 ng-annotate-webpack-plugin：
const NgAnnotatePlugin = require('ng-annotate-webpack-plugin');
然后在 plugins 数组中实例化：
plugins: [ new NgAnnotatePlugin({ add: true, }), ],
其中 add 参数表示是否添加注释。
注意
在使用 ng-annotate-webpack-plugin 时，需要在代码中使用特定的注释格式。如果代码中使用了函数参数的默认值或对象属性的简写形式，需要使用 /*@ngInject*/ 注释来显式声明依赖。
例如：
-- -------------------- ---- ------- -------------------------- --------------------------- ---------------- ------ - ------------- -------- ------ - ----------------- ------------------------- ----------- - -------------- --- - ------- ---展开代码
示例代码
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---------------- - -------------------------------------- -------------- - - -- ---- ------ ----------------- -- ---- ------- - --------- ---------------- ----- --------- - -------- -- -- ----- ------- - ------ - - ----- -------- -------- --------------- ------- --------------- -- -- -- -- -- -------- - --- ---------------------------------- --- ------------------ ---- ----- --- -- --展开代码
结论
ng-annotate-webpack-plugin 可以自动注入 AngularJS 依赖，在代码压缩时避免依赖注入失效的问题。使用 ng-annotate-webpack-plugin 可以提高应用程序的可维护性和稳定性，值得使用。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65365
