为什么 uglify 不能处理 AngularJS 内容？答案

【问题标题】：Why is uglify not working on AngularJS content?为什么 uglify 不能处理 AngularJS 内容？
【发布时间】：2016-07-12 16:21:28
【问题描述】：

我已经构建了一些 gulp 任务来帮助构建我的 Web 项目。在其中之一中，我正在缩小 js 文件。这是任务：

gulp.task('minify' , function() {
  console.log('Copy minified js ');
    return gulp.src('dist/www/**/*.js'])
    .pipe(uglify().on('error', function(e){
        console.log(e);
        }))
    .pipe(gulp.dest('dist/www'));
});

当我执行我的任务时：gulp minify 我收到以下错误：

{ [Error: E:XXXXXX\dist\tmp\bootstrap.js: SyntaxError: Unexpected token: name (mainModule)]
  message: 'E:XXXXXX\\dist\\tmp\\bootstrap.js: SyntaxError: Unexpected token: name (mainModule)',
  fileName: 'E:XXXXXX\\dist\\bootstrap.js',
  lineNumber: 1,
  stack: 'Error\n    at new JS_Parse_Error (eval at <anonymous> (E:XXXXXX\gfgfgfgf\\gulp-uglify\\node_modules\\uglify-js\\tools\\node.js:28:1), <anonymous>:1534:18)\n    at js_error (eval at <anonymous> (

这里是 bootstrap.js 文件：

import mainModule from './src/main';

angular.element(document).ready(function() {
  angular.bootstrap(document, [mainModule.name], { strictDi: true });
});

发生了什么事？有人可以帮助我解释为什么它不起作用吗？

谢谢！

【问题讨论】：

好的，我先编译

标签： javascript angularjs gulp gulp-uglify

【解决方案1】：

在你可以丑化 Angular 组件之前，你需要添加 Angular 依赖注入注解。在通过 uglify 进行管道传输之前，您可以通过 ng-annotate 管道传输。

编辑：另外，uglifying ES6 javascript 存在已知问题。如果你使用的是 ES6 语法，你应该在丑化它之前pipe your code through Babel。

希望这会有所帮助！

【讨论】：