Minifier混淆变量名

Question

我有一个 angular 路由器，它使用解析功能并调用服务 MyService。

var Router = function ($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state(home, {
            resolve:{
                myFactory: 'MyFactory',
                checkUser: function(myFactory){
                    return myFactory.getUser().then(function(data){
                        // some logic with data
                    });
                }
            },
        });
};

module.exports = ['$stateProvider', '$urlRouterProvider', Router];

当我运行它通过缩小器时，我最终得到：

var e = function(t, e) {

    t.state(home, {
        url: "/home",
        resolve: {
            myFactory: "MyFactory",
            checkUser: function(t){
                return t.getUser().then(function(e){

                });
            }
        },
    })
}
;
t.exports = ["$stateProvider", "$urlRouterProvider", e]

这里的问题是变量t和e。

顶层：

t = $stateProvider
e = $urlRouterProvider

然而，在我的resolve中，t和e又被使用了，但是：

t = $stateProvider but should = myFactory
e = $urlRouterProvider but should = data

因此 t.getUser 或 t.getProducts 实际上并不存在，因此我的应用无法加载。

更新：

注释版本：

var Router = function ($stateProvider, $urlRouterProvider) {

    $stateProvider
        .state(home, {
            resolve:{
                myFactory: 'MyFactory',
                checkUser: ['myFactory', function(myFactory){
                    return myFactory.getUser().then(function(data){
                        // some logic with data
                    });
                }]
            },
        });
};

module.exports = ['$stateProvider', '$urlRouterProvider', Router];

Answer 1

这本质上是从对象的 "method" 中访问对象及其属性的问题，因为它被正确地写入。

我为您制作了一个 Fiddle Example of Object Access，其中展示了如何访问对象属性以及如何区分访问对象的属性和传递给函数的参数。

要更正您的特定错误，您的解决方案可能需要如下所示，但我建议您查看 fiddle 示例并尝试自己弄清楚。我对 angular 有 0 次经验，据我所知，您可以在那里引用 $scope，它可以替代 this 但正如我所说，我不熟悉，希望这会有所帮助：

resolve:{
            self: this,
            myFactory: 'MyFactory',
            checkUser: function(){
                return self.myFactory.getUser().then(function(data){
                    // some logic with data
                });
            }
        },

Answer 2

这是标准的缩小器方法，为了使代码更小，它还会将变量名称更改为更小。

你可以通过三种方式解决：

a) 在 minifier 中你必须指定 no 来改变变量名。（例如 uglify 插件中的 mangle: false）

b) 使用 angular 数组符号，示例：

angular.service(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider) { .... } ]);

c) 使用 $inject 属性，示例：

var Router = function ($stateProvider, $urlRouterProvider) {
    $stateProvider
        .state(home, {
            resolve:{
                myFactory: 'MyFactory',
                checkUser: function(myFactory){
                    return myFactory.getUser().then(function(data){
                    // some logic with data
                });
            }
        },
    });
};
Router.$inject = ['$stateProvider', '$urlRouterProvider'];
module.exports = ['$stateProvider', '$urlRouterProvider', Router];

在您的特定场景中，只有 a) 和 c) 有效

Answer 3

是的。你需要 NG-Annotate。例如，对于 Gulp，我使用了 this one.

Answer 4

myFactory 是此解析器中的本地依赖项。与任何其他依赖项一样，它应该是 annotated 以便在缩小的 JS 中正确注入。

            checkUser: ['myFactory', function(myFactory){
                return myFactory.getUser().then(function(data){
                    // some logic with data
                });
            }]

Strict mode 可用于避免生产中的此类错误。

Minifier混淆变量名

Minifier confusing variable name

javascript

minify

angularjs