前端如何处理第三方库兼容性问题？

我们在开发过程中会使用一些第三方类库，类似Element UI、GSAP等等
部分第三方类库打包输出的文件由于使用了某些语法在低版本浏览器并不兼容，会导致报错，出现页面白屏的问题

案例

如最近用户在使用Chrome 49版本访问我们的系统时，页面直接白屏，从而进行排查，错误原因如下

控制台报错截图

通过控制台错误，可以定位到是由于Chrome 49版本不支持 Destructuring assignment: Rest in objects 语法导致报错，后续的JS无法继续执行，自然就白屏了。通过Can I use可以看到Chrome从60版本才开始支持该语法

image.png

这种情况下，我们首先让用户升级浏览器版本，后续再定位原因进行修复

原因

继续找到对应的报错行，发现是由于某个三方类库使用了该语法导致，在编译过程中，一般不会处理node_modules下的文件，因为这样做的话会比较消耗性能

解决方案

在编译过程中，使用Babel对该第三方类库进行编译，vue-cli提供了 transpileDependencies来指定需要编译的第三方类库

image.png

加上后，页面能够正常访问，但会出现另外一个报错

export default was not found

推断是编译后，类库输出的模块格式为commonjs，导致使用import导入报错
因此考虑放弃这种方式，通过添加新的module.rules来指定编译的模块和babel选项来处理

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设置为umd，否则会出现上面export default was not found的报错