UglifyJs Unexpected token: punc (,)

最新推荐文章于 2025-05-29 17:33:09 发布

触不到的颜色是否叫彩虹

最新推荐文章于 2025-05-29 17:33:09 发布

阅读量1.6k

点赞数

CC 4.0 BY-SA版权

文章标签： vue.js webpack

本文链接：https://blog.csdn.net/qq_28259083/article/details/127554861

博客围绕Vue打包报错展开，排查了几种可能原因。先是检查@click传参逗号问题，确认无误；接着用uglifyjs - webpack - plugin替换webpack.optimize.UglifyJsPlugin仍报错；最终发现是依赖包使用es6未经过babel - loader解析，经处理后解决问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

vue打包报错：
在这里插入图片描述
查到几种可能原因，一一排除

@click 调用方法传参多了个逗号
仔细检查了，确认没有写多逗号
uglifyjs-webpack-plugin代替webpack.optimize.UglifyJsPlugin

yarn uglifyjs-webpack-plugin --save-dev

  new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: config.build.productionSourceMap,
      parallel: true
    }),

替换成：

const UglifyJsPlugin = require("uglifyjs-webpack-plugin");
...
   new UglifyJsPlugin({
      "uglifyOptions":
          {
            compress: {
              warnings: false,
              drop_debugger: true, 
              drop_console: true 
            }
          },
          sourceMap: config.build.productionSourceMap,
          parallel: true
    }),

重新build还是报错

依赖包使用了es6，但是未经过babel-loader解析
用sourceMap：”source-map“模式看一下具体报错的文件：

{
        test: /\.mjs$/,
        loader: 'babel-loader',
        include: [resolve('node_modules/@vant/popperjs/dist/index.esm.mjs')]
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/js/static'), resolve('node_modules/mint-ui/node_modules/vue-lazyload')]
      },

这时候再重新build发现竟然可以了！
再把第二步的修改还原看一下，build也没有报错。
所以可以确定问题出在依赖包中使用了es6，将相关包用babel-loader解析一下即可。