背景
公司用的react版本15.7.0，项目比较老，通过react-app-rewired 启动，通过config-overrides.js文件注入相对应的webpack插件，webpack版本为3
发现问题
由于在做导出pdf功能的时候添加一些插件，本地运行的时候没有啥问题，等在代码合到主分支的时候打包出现问题，突然出现的一个未知问题，当时我还没有意识到问题的严重性，简单的以为是node版本问题
image.png
当我有nvm切换到12版本，发现问题没有解决，继续报错。机智的我赶紧去谷歌了一下，发现是装的某个包没导出es5的版本直接导出含有es6的代码。具体原因是由于npm社区默认在上传包的时候大部分是用es5的版本，但是架不住有人上传es6的。
解决问题
首先想到解决问题的办法，第一就是找到对应的包看看有没有es5版本的，第二替换压缩打包的插件，
后面又在谷歌搜索了一下，发现还有第三个解决问题的办法，就是将含有es6版本的包不给压缩。
实际操作
首先找到含有对应的es6的包，打包发现上图中的打包的文件中有提示，找到build包对应的行数，发现是html2canvas在使用了对象的结构语法。那么应该就是html2canva包的问题了。在npm上找对应的版本发现最新的包是十个月前上的。当即决定将版本。
image.png
降完版本，继续打包，发现还是出现对应的问题。难受，版本已经降到五年前的了，继续降好像没多大意义。只能换个方式解决了。谷歌发现有大佬开发了一个插件可以直接不压缩相对应的包，github地址。本着大佬666的想法应该能解决我的问题。下好对应的插件，配上对应的包，继续打包。OK ，又寄了。到这里我意识到了问题的严重性了。这个插件不能解决我的问题，和我的webpack版本有冲突。如果要升级必须把webpack升级到4。升级webpack代价有点大，意味着现有的插件版本可能和webpack4版本出现冲突。继续换个方法，将压缩打包的插件替换。现有的压缩插件是UglifyJs 2.8版本的，UglifyJs3版本是可以打包es6的，但是webpack又得升级。
UglifyJs打包似乎是不行了，换成terser。terser这里有个小坑，根据webpack版本不一样，插件也是不一样的。webpack3官方推荐terser-webpack-plugin-legacy，webpack4官方terser-webpack-plugin。继续下载对应的包terser-webpack-plugin-legacy，发现打包还是出现了第一个图的问题。按道理来说不应该的。打开项目的启动脚本，在函数入口输入对应的插件信息，发现进来的时候UglifyJs插件就已经在了。
image.png
问题似乎好解决了。写个函数将UglifyJs替换成terser问题就可以解决了
const replacePlugin = (plugins, nameMatcher, newPlugin) => {
const pluginIndex = plugins.findIndex((plugin) => {
return plugin.constructor && plugin.constructor.name && nameMatcher(plugin.constructor.name);
});
if (pluginIndex === -1) {
return plugins;
}
const nextPlugins = plugins.slice(0, pluginIndex).concat(newPlugin).concat(plugins.slice(pluginIndex + 1));
return nextPlugins;
};
使用
//将UglifyJsPlugin 换成 terser 打包
config.plugins = replacePlugin(
config.plugins,
name => /UglifyJsPlugin/i.test(name),
productTerserWebpackPlugin,
);
到这里继续打包，OK问题终于解决了。
总结
由于项目历史遗留的原因，各种插件和webpack版本落后。需要根据相对应的版本找出具体的解决方案。
