Vue CLI 3 项目中如何将外部库转译为 ES5，解决兼容性问题？

Vue CLI 3 中将外部库转译为 ES5

问题概述

在 Vue CLI 3 项目中集成外部 ES6 库（如 reconnecting-websocket）时，构建后代码中可能会包含 ES6 代码，导致在旧浏览器中运行时出现问题。

解决方法

有几种方法可以将外部库转译为 ES5：

1. 使用 transpileDependencies 选项

在 vue.config.js 中添加此选项可强制 Vue CLI 3 对外部库进行额外转译：

module.exports = {
  transpileDependencies: true
}

2. 使用 externals 选项

此选项告诉 Vue CLI 3 将特定库作为外部库处理：

module.exports = {
  externals: {
    'reconnecting-websocket': 'ReconnectingWebSocket'
  }
}

3. 使用 webpack-chain 扩展

此扩展允许手动配置 Webpack 以进行额外转译：

module.exports = {
  chainWebpack: config => {
    // 修改 Babel 选项以支持 ES5 转译
  }
}

4. 使用 postbuild 钩子

构建完成后，可以使用 postbuild 钩子执行额外的转译：

"scripts": {
  "postbuild": "babel node_modules --out-dir node_modules --presets @babel/preset-env"
}

注意事项

使用这些方法时，确保 Webpack 配置与 Vue CLI 3 的默认设置兼容。

结论

通过使用这些方法，可以在 Vue CLI 3 项目中将外部 ES6 库成功转译为 ES5，从而确保在旧浏览器中兼容运行。

常见问题解答

1. 为什么需要将外部库转译为 ES5？

旧浏览器不支持 ES6 代码，因此在集成到 Vue CLI 3 项目中时需要将外部 ES6 库转译为 ES5。

2. 使用哪种方法转换最适合？

最佳方法取决于项目的具体要求和外部库的特性。

3. 如何验证转换是否成功？

可以在编译后的代码（如 chunk-vendors.js）中检查是否包含 ES5 代码（例如常规函数声明而不是箭头函数）。

4. 转换是否有任何潜在缺点？

转换过程可能会增加构建时间，并且可能会导致代码大小略微增加。

5. 在 Vue CLI 3 中转译外部库有什么其他建议？

始终确保 Webpack 配置与 Vue CLI 3 的默认设置兼容，并根据需要使用 css-loader 和 style-loader 等其他加载器。