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'));
});

我得到一個縮小的 output。但是，當我在我的 html 應用程序中使用縮小的 output 時，我得到一個 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搞砸了？ 我該如何解決這個問題？

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 對最新的 3.xx Uglify-js 的依賴性很弱，新版本 v3.15.0 開始改變行為並開始使用 ',' 代替 ' ;'。

縮小的 js 可能是正確的，但在小時情況下 javascript 結果不是 100% 兼容的，在一些瀏覽器中我們的代碼有一些問題。 我們通過npm-force-resolutions和package-lock.json強制 NPM 解決對 v3.14.5 的依賴（最后一個舊行為）。