webpack打包angularjs后出现Angular $injector:unpr Unknown provider的错误及解决

一时失言乱红尘 2023-02-13 14:40 26阅读 0赞

### 文章目录 ###

*  问题
 *  原因
 *  解决
 *  附

# 问题 #

一个`angularjs1.x`的历史项目，`webpack3`做的打包，打出来的包一起有几十M，因为一直内网运行，虽然包大了点，但是还能够接受。

因为最近有一些客户对这个项目很感兴趣，就拿去演示，这就不能忍受了，然后受命去看看是什么问题。

在`package.json`的`scripts`中，是做了压缩代码脚本的，问了之前项目的同事说是压缩脚本出来的代码有部分页面是跑不起来的。so，就测试了一波，发现是`Angular $injector:unpr Unknown provider`错误。

# 原因 #

某些祖传代码在写的时候不规范，对`$scope`没有使用依赖注入的写法。

不规范的写法

app.controller('BadController', function($scope) { 
      $scope.a = 1;
      $scope.b = 2;
    });

依赖注入的写法

//使用了详细的注释，数组形式注入
    app.controller('GoodController1', ['$scope', function($scope) { 
      $scope.a = 1;
      $scope.b = 2;
    }]

以上两种写法在不使用`JavaScript`构件工具的时候是没有问题的，使用类似`webpack`压缩打包的时候，对代码做了很多压缩混淆的处理，不规范写法中的`$scope`通过名字就匹配不到需要注入的参数了，所以就杯具了。

问题找到了，怎么解决呢，那么多代码难道一个一个改过去？？？

# 解决 #

`webpack` 配置中使用了`UglifyJsPlugin`这个工具对`JavaScript`代码做了压缩和混淆处理，然后`UglifyJsPlugin`的文档告诉我们，它有个配置参数叫`mangle`，是用来处理混淆的，更妙的是`mangle`有个选项叫`reserved`，可以用一个数组来设置可以不被混淆的变量名。

> 这里用的是`webpack3.x`，使用`webpack4.x`的小伙伴，要注意下，`4.x` 中的压缩混淆工具已经换了

然后就有了下面这一段配置，问题就被解决了。

uglifyOptions: { 
        mangle: { 
            reserved: [
                "$scope",
                "scope",
            ],
        },
        compress: { 
            warnings: false,
            drop_console: true,
        },
        output: { 
            comments: false,
        },
    },

# 附 #

`mangle` 用于混淆属性/指定压缩配，下表是`mangle`的可配置项列表

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>作用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>builtins</td> 
   <td>混淆那些与标准JS全局变量重复的名字。</td> 
  </tr> 
  <tr> 
   <td>debug</td> 
   <td>添加debug前缀和后缀。</td> 
  </tr> 
  <tr> 
   <td>domprops</td> 
   <td>混淆那些与DOM属性名重复的名字</td> 
  </tr> 
  <tr> 
   <td>keep_quoted</td> 
   <td>只混淆没有被引号包起来的属性名</td> 
  </tr> 
  <tr> 
   <td>regex</td> 
   <td>只混淆匹配（该正则）的名字</td> 
  </tr> 
  <tr> 
   <td>reserved</td> 
   <td>不需要混淆的名字的列表（即保留）</td> 
  </tr> 
 </tbody> 
</table>

<完结>