关于打包A工程打包压缩错误的思考

写在前面：

问题核心： 打包时 uglify 压缩的问题；
问题的点：uglify压缩对ES6语法支持的问题；

背景

事项背景：

公司项目上有个组件A 依赖组件B；

因为功能的需要，我修改了组件B 代码，来扩展和丰富组件A的功能；

这个2个组件共同依赖一个模块C（即工具方法）；

我在正常打包组件B后，在A组件同步B的修改，最近对组件A 进行打包，但是居然报错了，报错情况如下所示：

> node scripts/build.js

Creating an optimized production build...
Failed to compile.

Failed to minify the bundle. Error: static/js/main.js from UglifyJs
Unexpected token: punc (,) [static/js/main.js:11913,13]
    at /Users/busyRobot/workSpace/B/A/scripts/build.js:120:23
    at /Users/busyRobot/workSpace/B/A/node_modules/webpack/lib/Compiler.js:269:13
    at Compiler.emitRecords (/Users/busyRobot/workSpace/B/A/node_modules/webpack/lib/Compiler.js:375:38)
    at /Users/busyRobot/workSpace/B/A/node_modules/webpack/lib/Compiler.js:262:10
    at /Users/busyRobot/workSpace/B/A/node_modules/webpack/lib/Compiler.js:368:12
    at next (/Users/busyRobot/workSpace/B/A/node_modules/tapable/lib/Tapable.js:218:11)
    at Compiler.<anonymous> (/Users/busyRobot/workSpace/B/A/node_modules/webpack/lib/performance/SizeLimitsPlugin.js:99:4)
    at next (/Users/busyRobot/workSpace/B/A/node_modules/tapable/lib/Tapable.js:220:14)
    at /Users/busyRobot/workSpace/B/A/node_modules/sw-precache-webpack-plugin/lib/index.js:98:18
Read more here: http://bit.ly/2tRViJ9

工程相关：

create-react-app 构建

Package.json 中的构建信息：

{
"babel-core": "6.26.0",
"babel-eslint": "7.2.3",
"babel-jest": "20.0.3",
"babel-loader": "7.1.2",
"babel-polyfill": "^6.26.0",
"babel-preset-react-app": "3.1.0",
"babel-runtime": "6.26.0",
"webpack": "3.8.1",
}

找寻原因：

开始分析

按照不成文的约定，先用报错百度：

果然得了一堆，看着相似但是又不是的资源，对报错有个大概的认识，有了许多推测的思绪；

通过报错分析

通过报错情况：

Failed to minify the bundle. Error: static/js/main.js from UglifyJs

推测： UglifyJs 的压缩有关系；

因为使用的是create-react-app构建的项目，而且我并没有直接引入UglifyJs；

就推测应该是create-react-app 中有引入这个压缩；

通过查找配置，在webpack.config.prod.js中得到下方配置：

    // Makes some environment variables available to the JS code, for example:
    // if (process.env.NODE_ENV === 'production') { ... }. See `./env.js`.
    // It is absolutely essential that NODE_ENV was set to production here.
    // Otherwise React will be compiled in the very slow development mode.
    new webpack.DefinePlugin(env.stringified),
    // Minify the code.
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false,
        // Disabled because of an issue with Uglify breaking seemingly valid code:
        // https://github.com/facebookincubator/create-react-app/issues/2376
        // Pending further investigation:
        // https://github.com/mishoo/UglifyJS2/issues/2011
        comparisons: false,
      },
      mangle: {
        safari10: true,
      },        
      output: {
        comments: false,
        // Turned on because emoji and regex is not minified properly using default
        // https://github.com/facebookincubator/create-react-app/issues/2488
        ascii_only: true,
      },
      sourceMap: shouldUseSourceMap,
    }),

用二把刀式的英文，阅读注释，确定可能的影响点；

因为是压缩相关的代码，我们可以推测，如果对代码不进行压缩，那么其实有不会影响打包；

于是，抱着忐忑的尝试性心态，注释了这段配置；

果然，打包成功，并且正常，当然打包后的包巨大（有1.4M）;

继续寻找..........

会不会是因为哪个同事修改了配置，导致的问题呢？

--------自我的内心活动；

了解插件

首先，去github 和webpack官方，找了这个插件相关的，一些资料，先知道了配置项相关的意思；

但是，这只能算是，扩展了知识，并没有找到对修改问题有用的资源（即，进行了一堆学习性尝试，囧）

从第一个思路中走出，继续看报错；

Unexpected token: punc (,) [static/js/main.js:11913,13]

根据提示，去看打包后文件的对应行数的代码，如下图所示；【本以为会是混乱的压缩代码】

对比确认后，发现是C 组件的源码；

结合，之前百度搜索到的一些情况，

推测和const 这个ES6的关键字有关;

然后，下载组件C 的代码，使用babel对其进行操作，将ES6 的语法转换为ES5 语法，并重新升级依赖，

最后，发现问题解决了！！！

结论：

因为同事书写的工具包未转义ES6 的语法导致create-react-app打包时，出现Failed to minify the bundle. Error: static/js/main.js from UglifyJs；即压缩异常；

引用sorrycc大神的一句话： 业界有个潜在的约定，npm 包发布前需要先用 babel 转出一份 es5 的代码。

Failed to minify the bundle Error from Uglifyjs 记一次打包压缩报错

感谢各位大佬们的记录，受益匪浅

关于打包A工程打包压缩错误的思考

关于打包A工程打包压缩错误的思考

写在前面：

背景

事项背景：

工程相关：

找寻原因：

结论：

查找到的相关资源：