我們?cè)陂_(kāi)發(fā)過(guò)程中會(huì)使用一些第三方類庫(kù)，類似Element UI、GSAP等等
部分第三方類庫(kù)打包輸出的文件由于使用了某些語(yǔ)法在低版本瀏覽器并不兼容，會(huì)導(dǎo)致報(bào)錯(cuò)，出現(xiàn)頁(yè)面白屏的問(wèn)題

案例

如最近用戶在使用Chrome 49版本訪問(wèn)我們的系統(tǒng)時(shí)，頁(yè)面直接白屏，從而進(jìn)行排查，錯(cuò)誤原因如下

控制臺(tái)報(bào)錯(cuò)截圖

通過(guò)控制臺(tái)錯(cuò)誤，可以定位到是由于Chrome 49版本不支持 Destructuring assignment: Rest in objects 語(yǔ)法導(dǎo)致報(bào)錯(cuò)，后續(xù)的JS無(wú)法繼續(xù)執(zhí)行，自然就白屏了。通過(guò)Can I use可以看到Chrome從60版本才開(kāi)始支持該語(yǔ)法

image.png

原因

繼續(xù)找到對(duì)應(yīng)的報(bào)錯(cuò)行，發(fā)現(xiàn)是由于某個(gè)三方類庫(kù)使用了該語(yǔ)法導(dǎo)致，在編譯過(guò)程中，一般不會(huì)處理node_modules下的文件，因?yàn)檫@樣做的話會(huì)比較消耗性能

解決方案

在編譯過(guò)程中，使用Babel對(duì)該第三方類庫(kù)進(jìn)行編譯，vue-cli提供了 transpileDependencies來(lái)指定需要編譯的第三方類庫(kù)

image.png

加上后，頁(yè)面能夠正常訪問(wèn)，但會(huì)出現(xiàn)另外一個(gè)報(bào)錯(cuò)

export default was not found

推斷是編譯后，類庫(kù)輸出的模塊格式為commonjs，導(dǎo)致使用import導(dǎo)入報(bào)錯(cuò)
因此考慮放棄這種方式，通過(guò)添加新的module.rules來(lái)指定編譯的模塊和babel選項(xiàng)來(lái)處理

config.module
  .rule('compile')
    .test(/\.js$/)
    .include
      .add('node_modules/xxx'
      .end()
    .use('babel')
      .loader('babel-loader')
      .options({
        presets: [
          ['@babel/preset-env', { modules: 'umd' }]
        ]
      });

注意modules設(shè)置為umd，否則會(huì)出現(xiàn)上面export default was not found的報(bào)錯(cuò)