背景
公司用的react版本15.7.0苗沧，項目比較老教寂，通過react-app-rewired 啟動杀狡，通過config-overrides.js文件注入相對應的webpack插件籍滴，webpack版本為3
發(fā)現(xiàn)問題
由于在做導出pdf功能的時候添加一些插件酪夷，本地運行的時候沒有啥問題，等在代碼合到主分支的時候打包出現(xiàn)問題孽惰，突然出現(xiàn)的一個未知問題晚岭，當時我還沒有意識到問題的嚴重性，簡單的以為是node版本問題
image.png
當我有nvm切換到12版本勋功，發(fā)現(xiàn)問題沒有解決坦报，繼續(xù)報錯。機智的我趕緊去谷歌了一下狂鞋，發(fā)現(xiàn)是裝的某個包沒導出es5的版本直接導出含有es6的代碼片择。具體原因是由于npm社區(qū)默認在上傳包的時候大部分是用es5的版本，但是架不住有人上傳es6的骚揍。
解決問題
首先想到解決問題的辦法字管，第一就是找到對應的包看看有沒有es5版本的，第二替換壓縮打包的插件信不，
后面又在谷歌搜索了一下嘲叔，發(fā)現(xiàn)還有第三個解決問題的辦法，就是將含有es6版本的包不給壓縮抽活。
實際操作
首先找到含有對應的es6的包硫戈，打包發(fā)現(xiàn)上圖中的打包的文件中有提示，找到build包對應的行數(shù)下硕，發(fā)現(xiàn)是html2canvas在使用了對象的結構語法丁逝。那么應該就是html2canva包的問題了。在npm上找對應的版本發(fā)現(xiàn)最新的包是十個月前上的卵牍。當即決定將版本果港。
image.png
降完版本，繼續(xù)打包糊昙，發(fā)現(xiàn)還是出現(xiàn)對應的問題辛掠。難受，版本已經(jīng)降到五年前的了释牺，繼續(xù)降好像沒多大意義萝衩。只能換個方式解決了。谷歌發(fā)現(xiàn)有大佬開發(fā)了一個插件可以直接不壓縮相對應的包没咙，github地址猩谊。本著大佬666的想法應該能解決我的問題。下好對應的插件祭刚，配上對應的包牌捷，繼續(xù)打包墙牌。OK ，又寄了暗甥。到這里我意識到了問題的嚴重性了喜滨。這個插件不能解決我的問題，和我的webpack版本有沖突撤防。如果要升級必須把webpack升級到4虽风。升級webpack代價有點大，意味著現(xiàn)有的插件版本可能和webpack4版本出現(xiàn)沖突寄月。繼續(xù)換個方法辜膝，將壓縮打包的插件替換。現(xiàn)有的壓縮插件是UglifyJs 2.8版本的漾肮，UglifyJs3版本是可以打包es6的厂抖，但是webpack又得升級。
UglifyJs打包似乎是不行了初橘，換成terser验游。terser這里有個小坑，根據(jù)webpack版本不一樣保檐，插件也是不一樣的。webpack3官方推薦terser-webpack-plugin-legacy崔梗，webpack4官方terser-webpack-plugin夜只。繼續(xù)下載對應的包terser-webpack-plugin-legacy，發(fā)現(xiàn)打包還是出現(xiàn)了第一個圖的問題蒜魄。按道理來說不應該的扔亥。打開項目的啟動腳本，在函數(shù)入口輸入對應的插件信息谈为，發(fā)現(xiàn)進來的時候UglifyJs插件就已經(jīng)在了旅挤。
image.png
問題似乎好解決了。寫個函數(shù)將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,
);
到這里繼續(xù)打包伞鲫，OK問題終于解決了粘茄。
總結
由于項目歷史遺留的原因，各種插件和webpack版本落后秕脓。需要根據(jù)相對應的版本找出具體的解決方案柒瓣。
