前言
- 今天剛寫完一個需求準備打包測試,眼看着進度快跑滿了啪的一下給我來了一個錯,如下圖:
簡單分析
Failed to minify the bundle
看了下大概的錯講的應該是壓縮代碼報錯了,而Uglifyjs
確實也是webpack
打包壓縮的插件。- 看下一行,大概講的是
index.295edf21.js
文件的第264048
行報的錯。找到我們打出的包的文件夾
- 使用
nodepad++
打開找到相應行數
- 看出這裏講的是一個
arrayMoveMutate
函數,回想一下今天好像裝了一個array-move
的包。既然是這裏報的錯,那麼先手動將這個包移除重新打包,發現可以成功
- 打包成功了,但是當時使用這個包是爲了解決數組內數據移動的操作所引入的一個包,爲了解決這個問題手動將這個
arrayMoveMutate
arrayMove
函數複製到我們的工具函數內,直接使用,再次打包發現可以使用。
爲什麼?
- 找到問題了,但是爲什麼會出現這個錯呢,我們手動打開該模塊,發現代碼很簡單就是我們上面複製的兩個方法,但是問題是他的這個包是使用
commonJs
規範編寫的
- 查看該庫的
issues
發現作者也是這樣迴應的Leaking ES6 code to ES5 bundle,這個模塊針對nodejs
開發,瀏覽器中如果使用必須使用babel
編譯後進行使用。
- 另外,這裏還有一個講Webpack的UglifyJS插件引發錯誤的討論,
- 我想這纔是真正造成我們代碼打包失敗壓縮失敗的原因,這裏還有一個關於Enable babel-preset-env for node_modules that target newer Node versions的討論