gulp-uglify正在创建错误的javascript

hrirmatl  于 2022-12-16  发布在  Gulp
关注(0)|答案(3)|浏览(149)

我正在使用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继续lint这个JS文件,如下所示。

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把事情搞砸了?我该如何解决这个问题?

mkh04yzy

mkh04yzy1#

变更:

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

致:

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

djmepvbi2#

问题不在于丑化它是你自己的代码,而在于破坏了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

vbkedwbf

vbkedwbf3#

我们在使用gulp-uglify和安德伍德Uglify-js时发现了同样的问题。经过长时间的研究,我们发现gulp-uglify对最新3.x.x Uglify-js的依赖性较弱,新版本v3.15.0开始改变行为,并开始使用“,”代替“编写js;'.
这个js可能是正确的,但是在一些浏览器中,javascript的结果不是100%兼容的,我们的代码有一些问题。我们修复了这个问题,强制NPM使用npm-force-resolutionspackage-lock.json解决v3.14.5的依赖性(最后一个是旧的行为)。

相关问题