使用 grunt uglify 进行 Angularjs 缩小导致 js 错误

IT技术 javascript angularjs dependency-injection gruntjs uglifyjs
2021-03-04 06:08:17

在 angularjs 中，我们将参数作为依赖注入传递。例如，

function checkInCtrl ($scope, $rootScope, $location, $http){
…..
….
}

所以当它被缩小时，它变得像，

function checkInCtrl(a,b,c,d){
}

现在 a,b,c,d 不会被 angular 分别解释为 $scope, $rootScope, $location, $http 并且整个代码无法工作。为此，angularjs 提供了一种解决方案，即

checkInCtrl.$inject = ['$scope', '$rootScope', $location', '$http'];

我们可以使用上述语法注入不同的依赖项。这很有效，直到我没有使用某些自定义角度服务作为依赖项。例如，

如果我有类似的东西 

function checkInCtrl ($scope, $rootScope, $location, $http){
…..
….
}

它适用于给定的解决方案，但如果我有类似的东西

function checkInCtrl ($scope, $rootScope, $location, $http, customService){
…..
….
}

其中 customService 是这样的

angular.module(customService, ['ngResource'])
                .factory('abc', function($resource) {
                                return $resource('/abc');
                })

angular 无法正确解释它的缩小版本。

由于我们必须开始项目开发活动，我们无法花足够的时间来研究问题，因此我们开始使用控制器而不缩小它们。所以第一个问题是角度是否存在这样的问题，或者我犯了一些错误而导致它不起作用？如果存在这样的问题，有什么解决办法？

4个回答

您必须使用基于字符串注入的语法来确保缩小版本指向良好的依赖性：

function checkInCtrl ($scope, $rootScope, $location, $http){}

变成：

['$scope', '$rootScope', '$location', '$http', function checkInCtrl ($scope, $rootScope, $location, $http){}]
是的，它旨在处理自定义或标准依赖项。看看这里的例子：thegreenpizza.github.io/2013/05/25/...
2021-04-29 06:08:17
非常感谢@Cétia，您的回复帮助我解决了一个大问题，也让我知道了字符串注入的用途！再次感谢 ！
2021-04-29 06:08:17
嘿 Bixi，'checkInCtrl.$inject = ['$scope', '$rootScope', $location', '$http']' 和 '['$scope', '$rootScope', '$location', ' $http', function checkInCtrl ($scope, $rootScope, $location, $http){}]' 的工作方式相同。我用过第一个。问题是当我们使用自定义服务作为函数中的参数之一时
2021-05-10 06:08:17
那么当你的代码被丑化时，只有第二个会起作用
2021-05-16 06:08:17
问题是当我们使用自定义服务作为函数中的参数之一时，否则第一个解决方案有效，那么您是说您建议的解决方案也适用于自定义服务吗？
2021-05-21 06:08:17

深渊，

Bixi 建议的解决方案将起作用。然而，更简单的方法是使用 ngmin Grunt 插件。使用这个插件，你不需要像你所做的那样处理依赖注入，也不需要像 Bixi 这样的特殊语法。

要使用它，请确保您拥有grunt-ngmin并在 uglify 之前调用它。

你的 Gruntfile.js：

ngmin: {
  dist: {
    files: [{
      expand: true,
      cwd: '.tmp/concat/scripts',
      src: '*.js',
      dest: '.tmp/concat/scripts'
    }]
  }
},

....

grunt.registerTask('build', [
  'ngmin',
  'uglify',
]);
嘿 Lee，我正在使用 ngmin 创建我所有控制器文件的一个合并 uglified 文件，因此生成的文件比使用 uglify 生成的文件大一倍。
2021-05-01 06:08:17
我使用 ngmin 和不使用 ngmin 测试了我的项目，但似乎看不出区别。你最终只有 2 个 js 文件：scripts.js 和 vendor.js，对吧？这两个文件中哪个文件的大小差异最大？
2021-05-05 06:08:17
Hey Lee，这是实现角度应用程序缩小的最简单方法。它也有效。那谢谢啦。但是我观察到的缺点是缩小的文件大小几乎是使用 uglify 创建的文件大小的两倍。
2021-05-16 06:08:17

有关信息， ngMin 已被弃用。您应该使用ngAnnotate，而不是与精美的作品咕噜和一饮而尽。

使 uglify 和 minify 工作将显示（就像在我的情况下一样）注入变量从 $scope 更改为 'a' 的位置示例：此代码：

controller: function($scope) {
        $scope.showValidation= false;
        this.showValidation = function(){
            $scope.showValidation = true;
        };
    }

在缩小和丑化之后变成：

controller:function(a){a.showValidation=!1,this.showValidation=function(){a.showValidation=!0}}

你会得到一个错误，因为 'a' 与 $scope 不同。

解决方案是显式声明注入的变量：

controller: ['$scope', function($scope) {
        $scope.showValidation= false;
        this.showValidation = function(){
            $scope.showValidation = true;
        };
    }]

在缩小和丑化之后变成：

controller:["$scope",function(a){a.showValidation=!1,this.showValidation=function(){a.showValidation=!0}}]

现在'a' 被映射到$scope。

其它你可能感兴趣的问题
上一篇对 javascript 表单验证库的建议 下一篇未调用表单“提交”