gulp-uglify 造成不良影响 javascript

Question

我正在使用 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美化回来时（via 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 搞砸了？我该如何解决这个问题？

Answer 1

变化：

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

至：

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

Answer 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

Answer 3

我们在使用 gulp-uglify 和 underwood Uglify-js 时发现了同样的问题。经过长时间的研究我们发现了问题，gulp-uglify 对 Latest 3.x.x Uglify-js 有弱依赖，新版本 v3.15.0 开始更改beaviours 并开始使用 ',' 代替 ';' 来编写 js。

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

gulp-uglify 造成不良影响 javascript

gulp-uglify is creating bad javascript

javascript

angularjs

gulp

gulp-uglify