当前位置 博文首页 > 文章内容

    ERROR in build.js from UglifyJs

    作者: 栏目:未分类 时间:2020-08-11 11:00:01

    本站于2023年9月4日。收到“大连君*****咨询有限公司”通知
    说我们IIS7站长博客,有一篇博文用了他们的图片。
    要求我们给他们一张图片6000元。要不然法院告我们

    为避免不必要的麻烦,IIS7站长博客,全站内容图片下架、并积极应诉
    博文内容全部不再显示,请需要相关资讯的站长朋友到必应搜索。谢谢!

    另祝:版权碰瓷诈骗团伙,早日弃暗投明。

    相关新闻:借版权之名、行诈骗之实,周某因犯诈骗罪被判处有期徒刑十一年六个月

    叹!百花齐放的时代,渐行渐远!



    ERROR in build.js from UglifyJs

    简述: 使用 npm run build 编译vue + webpack + babel 打包的项目时报错,而npm run dev正常运行,搜百度,尝试了 删除所有node_modules 重新 npm install, 以及引入 babel-2015均未解决。

    错误详情:

    image

    观察下面的错误提示,大意是未知标识符 index,简单说就是语法错误

    ERROR in build.js from UglifyJs
    Unexpected token: name (index) [./node_modules/mqtt/node_modules/debug/src/browser.js:155,0][build.js:25671,5]
    

    打开后面显示的node_modules路径查看文件第155行

    /* The code in /node_modules/mqtt/node_modules/debug/src/browser.js:155 */
    152     // The final "%c" is somewhat tricky, because there could be other
    153     // arguments passed either before or after the %c, so we need to
    154     // figure out the correct index to insert the CSS into
    155     let index = 0;
    156     let lastC = 0;
    157     args[0].replace(/%[a-zA-Z%]/g, match => {
    158         if (match === '%%') {
    159             return;
    160         }
    161         index++;
    162         if (match === '%c') {
    163             // We only are interested in the *last* %c
    164             // (the user may have provided their own)
    165             lastC = index;
    166         }
    167     });
    

    可以看到第155行有 let 语法,这个是ES6的,正常情况babel 可以解析这种
    但是我们webpack配置排除了 node_modules 所以解析不到

    /* The code in webpack.config.js */
                {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    exclude: /node_modules/
                },
    

    解决办法就是想办法引入 /node_modules/mqtt 使其接收babel解析,查看官方配置文档

    webpack.configuration

    官方配置文档中,对于include和exclude描述如下注释部分,exclude优先级大于include,建议全用include路径数组

            test: /\.jsx?$/,
            include: [
              path.resolve(__dirname, "app")
            ],
            exclude: [
              path.resolve(__dirname, "app/demo-files")
            ],
            // these are matching conditions, each accepting a regular expression or string
            // test and include have the same behavior, both must be matched
            // exclude must not be matched (takes preferrence over test and include)
            // Best practices:
            // - Use RegExp only in test and for filename matching
            // - Use arrays of absolute paths in include and exclude
            // - Try to avoid exclude and prefer include
    

    头疼的是,node_modules是一个无底洞,不可能一个一个手写到include的路径数组中

    无奈之下,重新看看 babel-loader的文档,看看能不能找到解决方案,其中看到疑难解答

    webpack.babel-loader

    babel-loader 很慢!
    确保转译尽可能少的文件。你可能使用 /.js$/ 来匹配,这样也许会去转译 node_modules 目录或者其他不需要的源代码。

    要排除 node_modules,参考文档中的 loaders 配置的 exclude 选项。

    你也可以通过使用 cacheDirectory 选项,将 babel-loader 提速至少两倍。 这会将转译的结果缓存到文件系统中。

    后面顿时醒悟,exclude排除node_modules只是为了加快 build 速度,减少不必要的解析
    打包速度慢大多数人可以接受,因为不是经常去打包,所以直接注释掉webpack.config.js 中下面一行重新打包即可

               {
                    test: /\.js$/,
                    loader: 'babel-loader',
                    //exclude: /node_modules/
                },