Vue CLI 3 不会将供应商转换为 ES5 [英] Vue CLI 3 does not convert vendors to ES5
问题描述
我们有一个 vue-cli 3 项目.它运行良好，编译没有问题.
We have a vue-cli 3 project. It works pretty well and compiles without problem.
事实是我们必须支持仅支持 ES5 代码的旧浏览器.
The fact is we have to support old browser supporting ES5 code only.
在项目中我们集成了一些用 ES6 编写的外部库(以reconnecting-websocket 为例).
In the project we integrated some external libraries written in ES6 (reconnecting-websocket is an example).
使用这些外部编译我们的项目后，vue-cli 生成的代码具有 ES6 代码.
After compiling our project with these externals, then the produced code by vue-cli has ES6 code.
例如我们的 chunk-vendors.js 有这样的代码:
For example our chunk-vendors.js has this code:
/*!
* Reconnecting WebSocket
* by Pedro Ladaria <pedro.ladaria@gmail.com>
* https://github.com/pladaria/reconnecting-websocket
* License MIT
*/const o=()=>{if("undefined"!==typeof WebSocket)return
WebSocket},a=t=>"function"===typeof t&&
带有 ES6 粗箭头函数 const o=()=>{.因此，在旧浏览器中运行此代码会中断.
with an ES6 fat arrow function const o=()=>{. So running this code in old browser breaks.
这是我们的 .browserlistrc 文件，因为它似乎是在 Vue CLI 3 中添加浏览器支持的推荐方式:
Here is our .browserlistrc file as it seems to be the recommanded way to add browser support in Vue CLI 3:
> 1%
last 2 versions
not ie <= 8
Android >= 4
vue CLI 似乎正确地转译了 ES5 中的应用程序代码.但它并没有对供应商造成另一次影响.
It seems vue CLI transpiles the app code in ES5 properly. But it doesn't do another pass on vendors.
有什么方法可以使用 CLI v3 配置 vue 项目，以便在构建后进行最终的转译以确保文件都兼容 ES5?
我们认为嵌入式 babel 和 webpack 会自动完成，但事实并非如此.
We thought embedded babel and webpack would do it automatically but it seems it's not the case.
我们尝试在 vue.config.js 中使用 transpileDependencies 选项，但它没有改变任何东西，并且粗箭头仍然存在于供应商块中.>
We tried to use the transpileDependencies option in vue.config.js but it didn't change anything and fat arrows were still there in the vendor chunk.
推荐答案
在与 vue.config.jsbabel.config.js 的文件> 文件.
Create a file called babel.config.js in the same directory as your vue.config.js file.
在这个文件中你要添加:-
In this file your going to want to add :-
process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;
module.exports = {
presets: ["@vue/app"]
};
现在应该使用 babel 来转译外部模块.
This should now use babel to transpile external modules.
这应该与 vue.config.js 中的 transpileDependencies 选项结合使用.
This should be used in conjunction with the transpileDependencies option in vue.config.js.
这篇关于Vue CLI 3 不会将供应商转换为 ES5的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
