gulp-uglify 正在创建错误的 javascript答案

【问题标题】：gulp-uglify is creating bad javascriptgulp-uglify 正在创建错误的 javascript
【发布时间】：2015-09-07 11:08:49
【问题描述】：

我正在使用 AngularJS，我的应用程序 JS 设置如下。

var userApp = angular.module('userApp',['ngRoute','ngAnimate', 'bw.paging', 'appConfig', 'userControllers']);

userApp.run(function($rootScope, $location) { 
    $rootScope.pagination = { };
});

userApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
}]);

userApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider
        .when('/', {
            templateUrl : 'partials/index.html', 
            controller : 'IndexController' 
        })
        .otherwise({ 
            templateUrl : 'partials/routeNotFound.html', 
            controller : 'NotFoundController' 
        });
}]);

var userControllers = angular.module('userControllers', []);

然后我继续使用 gulp 对这个 JS 文件进行 lint。

gulp.task('lint1', function() {
    gulp.src('test.js')
        .pipe(jshint())
        .pipe(jshint.reporter('default'));
});

我没有收到任何错误报告。接下来，我继续使用gulp-uglify 缩小它。

gulp.task('minify1', function() {
    gulp.src('test.js')
        .pipe(uglify())
        .pipe(gulp.dest('dist'));
});

我得到一个缩小的输出。但是，当我在我的 html 应用程序中使用缩小的输出时，我得到一个 AngularJS 错误。当我将丑化的 JS 美化回来时（通过 jsbeautifier.org），我看到以下结果。

var userApp = angular.module("userApp", ["ngRoute", "ngAnimate", "bw.paging", "appConfig", "userControllers"]);
userApp.run(function(r, e) {
    r.pagination = {}
}), userApp.config(["$httpProvider", function(r) {
    r.defaults.useXDomain = !0
}]), userApp.config(["$routeProvider", function(r) {
    r.when("/", {
        templateUrl: "partials/index.html",
        controller: "IndexController"
    }).otherwise({
        templateUrl: "partials/routeNotFound.html",
        controller: "NotFoundController"
    })
}]);
var userControllers = angular.module("userControllers", []);

如您所见，逗号, 应该有分号;。我的输入 JS 文件是坏的还是 gulp-uglify 搞砸了？我该如何解决这个问题？

【问题讨论】：

与您的问题无关，您的代码还有一些其他问题，例如两次使用.config和使用$rootScope
alert(1), alert(2); 是完全有效的javascript。我认为 uglify 的翻译没有问题。您应该阅读以下内容：javascriptweblog.wordpress.com/2011/04/04/…
@Blowsie 我该如何解决这些问题？对于.config，我可以将它们放在一种配置中，例如userApp.config(['$httpProvider', '$routeProvider', function($httpProvider, $routeProvider) { ... }])。这会“更好”吗？但是，当您说$rootScope 存在问题时，我不确定您的意思。那是我存储全局变量的地方，以便在不同的路由中进行分页以及在路由之间导航时（我想保持状态）。

标签： javascript angularjs gulp gulp-uglify

【解决方案1】：

变化：

userApp.run(function($rootScope, $location) { 
    $rootScope.pagination = { };
});

到：

userApp.run(['$rootScope', '$location', function($rootScope, $location) { 
    $rootScope.pagination = { };
}]);

【讨论】：

那行得通。我还需要 6 分钟来接受你的回答。一个问题，我认为这是因为逗号, 与分号; 的关系，但是在尝试了你的建议之后，虽然它有效，但我仍然看到逗号而不是分号。那么我想，这个问题是AngularJS而不是JS或gulp-uglify？
@JaneWayne 我的回答提供了一些澄清。
@JaneWayne uglify 生成的代码完全有效。
很遗憾，问题中几乎没有指向这个答案的指针，因为这个问题本质上是在询问一个不相关的问题。

【解决方案2】：

问题不在于丑化，而是您自己的代码。它打破了 Angular 的依赖注入；

userApp.run(function($rootScope, $location) { 
    $rootScope.pagination = { };
});

应该是

userApp.run(['$rootScope', '$location', function($rootScope, $location) { 
    $rootScope.pagination = { };
}]);

或者，您可以使用 ng-annotate 来为您处理这个依赖注入问题。 https://www.npmjs.com/package/gulp-ng-annotate

【讨论】：

【解决方案3】：

我们使用 gulp-uglify 和 underwood Uglify-js 发现了同样的问题。经过长期研究发现问题，gulp-uglify对Latest 3.x.x Uglify-js的依赖较弱，新版本v3.15.0开始改变行为，开始使用'写js ,' 代替 ';'。

缩小的 js 可能是正确的，但在小时情况下，javascript 结果不是 100% 兼容的，在少数浏览器我们的代码有一些问题。我们修复了它，强制 NPM 使用 npm-force-resolutions 并使用 package-lock.json 解决对 v3.14.5（最后一个旧行为）的依赖。

【讨论】：