前言
- 今天剛寫(xiě)完一個(gè)需求準(zhǔn)備打包測(cè)試，眼看著進(jìn)度快跑滿了啪的一下給我來(lái)了一個(gè)錯(cuò)，如下圖:
image
簡(jiǎn)單分析
-
Failed to minify the bundle看了下大概的錯(cuò)講的應(yīng)該是壓縮代碼報(bào)錯(cuò)了惜傲，而Uglifyjs確實(shí)也是webpack打包壓縮的插件。 - 看下一行袱耽，大概講的是
index.295edf21.js文件的第264048行報(bào)的錯(cuò)蚁趁。找到我們打出的包的文件夾
image
- 使用
nodepad++打開(kāi)找到相應(yīng)行數(shù)
image
- 看出這里講的是一個(gè)
arrayMoveMutate函數(shù)，回想一下今天好像裝了一個(gè)array-move的包泄鹏。既然是這里報(bào)的錯(cuò)郎任，那么先手動(dòng)將這個(gè)包移除重新打包，發(fā)現(xiàn)可以成功
image
image
- 打包成功了备籽，但是當(dāng)時(shí)使用這個(gè)包是為了解決數(shù)組內(nèi)數(shù)據(jù)移動(dòng)的操作所引入的一個(gè)包舶治，為了解決這個(gè)問(wèn)題手動(dòng)將這個(gè)
arrayMoveMutatearrayMove函數(shù)復(fù)制到我們的工具函數(shù)內(nèi)，直接使用车猬，再次打包發(fā)現(xiàn)可以使用霉猛。
為什么?
- 找到問(wèn)題了，但是為什么會(huì)出現(xiàn)這個(gè)錯(cuò)呢珠闰，我們手動(dòng)打開(kāi)該模塊惜浅，發(fā)現(xiàn)代碼很簡(jiǎn)單就是我們上面復(fù)制的兩個(gè)方法，但是問(wèn)題是他的這個(gè)包是使用
commonJs規(guī)范編寫(xiě)的
image
- 查看該庫(kù)的
issues發(fā)現(xiàn)作者也是這樣回應(yīng)的Leaking ES6 code to ES5 bundle伏嗜，這個(gè)模塊針對(duì)nodejs開(kāi)發(fā)坛悉，瀏覽器中如果使用必須使用babel編譯后進(jìn)行使用伐厌。
image
- 另外，這里還有一個(gè)講Webpack的UglifyJS插件引發(fā)錯(cuò)誤的討論裸影，
image
- 我想這才是真正造成我們代碼打包失敗壓縮失敗的原因,這里還有一個(gè)關(guān)于Enable babel-preset-env for node_modules that target newer Node versions的討論
image
