webpack打包出错：... UglifyJs Unexpected token name(...)解决方案

时间：2024-11-17 21:33:36

1.问题描述：

使用webpack打包的时候出现Unexpected token: name的错误，完整报错如下：

ERROR in js/app. from UglifyJs
Unexpected token: name (result) [./node_modules/_node-rsa@1.1.1@node-rsa/src/formats/:12,0][static/js/vendor.:81119,12....]
  • 1
  • 2

2.原因

这是因为在中的loaders在转ES5时，会过滤掉node_modules，而有的依赖模块使用了ES6语法，需要进行babel处理，所以要将这些模块放在babel-loader中的include中。

3.解决方法

未修改前的文件：

 {
        test: /\.js$/,
        loader: "babel-loader",
        include: [
          resolve("src"),
          resolve("test"),
          resolve("node_modules/vue-echarts"),
        ],
      },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

将asn1和node-rsa加上去之后：

{
        test: /\.js$/,
        loader: "babel-loader",
        include: [
          resolve("src"),
          resolve("test"),
          resolve("node_modules/vue-echarts"),
          resolve("node_modules/_asn1.js@5.4.1@"),
          resolve("node_modules/_node-rsa@1.1.1@node-rsa"),
        ],
      },
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11

再次打包后未出现错误

4.错误分析方法

转载自：打包UglifyJs出错解决方法

先搜索

$ cd node_modules
$ grep "Unexpected token:" . -nR```
...
./webpack/node_modules/uglify-js/lib/parse.js
  • 1
  • 2
  • 3
  • 4

找到抛出异常的位置，打印报错文件的上下文

console.log('Unexpected context =>', $TEXT.split('\n').slice(token.line - 2, token.endline + 4));
token_error(token, "Unexpected token1: " + token.type + " (" + token.value + ")");
  • 1
  • 2

再次执行可以看到报错的上下文代码

Unexpected context => [ '',
  '  let result = state[\'default\'];',
  '  let present = true;',
  '',
  '  let prevKey = null;',
  '  if ( !== null)' ]
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6

再根据报错的上下文代码搜索到指定的模块

$ grep "let result = state" . -nR
./asn1.js/lib/asn1/base/node.js:282:  let result = state['default'];
  • 1
  • 2

定位到是模块有问题，需要进行babel处理
————————————————
版权声明：本文为****博主「wenjun_xiao」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：/wenjun_xiao/article/details/114371801

相关文章