angularjs - gulp-uglify + Uncaught Error : [$injector:modulerr]

Question

尝试丑化js文件。当我使用 index.html 中的捆绑文件时。我收到以下错误。

下面是我的 gulp 文件。

'use-strict'
var gulp = require('gulp');
var uglify = require('gulp-uglify');
var concat = require('gulp-concat');
var exec = require('gulp-exec');
var ngAnnotate = require('gulp-ng-annotate');
const babel = require('gulp-babel');
var exec = require('child_process').exec;
gulp.task('scripts', function () {
return gulp.src(['vzrth.js','psrhs.js'])
.pipe(ngAnnotate())
    .pipe(babel({
      presets: ['es2015']
    }))
    .pipe(concat('bundle.js'))
    .pipe(uglify().on('error', function (e) {
      console.log(e);
    }))
    .pipe(gulp.dest('./client'));
});
gulp.task('nodestart', function (cb) {
  exec('node ./bin/www', function (err, stdout, stderr) {
    console.log(stdout);
    console.log(stderr);
    cb(err);
  });
})
gulp.task('default', ['scripts', 'nodestart']);

我得到的错误是:

reference error: Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=e

Answer 1

当您缩小 Angular 文件时，您需要注意，如果操作不当，依赖注入(inject) (DI) 将中断。

这是带有 DI 的 Controller 的缩小版不安全示例:

.controller('MyController', function($scope, $timeout) {
    $scope.title = 'Minify me';
});

这是带有 DI 的同一 Controller 的缩小 SAFE 示例:

.controller('MyController', ['$scope', '$timeout', function ($scope, $timeout) {
   $scope.title = 'Minify me';
}]);

为什么第一个示例在缩小时会崩溃？

当您缩小 JavaScript 文件时，函数中的参数会缩小为更简单的内容，因此缩小后这将是您的 Controller :首先是不安全的例子:

.controller('MyController', function(a, b) {
    a.title = 'Minify me';
});

如您所见，$scope 已缩小为 a。 a 对 Angular 来说没有任何意义(除非您实际上有一个定义为 a 的服务)。

现在是缩小安全示例:

.controller('MyController', ['$scope', '$timeout', function (a, b) {
       a.title = 'Minify me';
    }]);

在此示例中，Angular 知道第一个参数实际上是 $scope，因为字符串文字不会被缩小。

编辑:

如果您声明这样的 Controller 或指令(缩小不安全):

.controller('MyController', controller);
function controller($scope, $timeout) {
   $scope.title = 'Minify me'
}

这将变成(方法 1):

.controller('MyController', controller);
controller.$inject = ['$scope', '$timeout'];
function controller($scope, $timeout) {
   $scope.title = 'Minify me'
}

或者这将变成(方法 2)

.controller('MyController', ['$scope','$timeout', controller]);
function controller($scope, $timeout) {
   $scope.title = 'Minify me'
}