Vue CLI 3不会将供应商转换为ES5

Question

我们有一个vue-cli 3项目.它工作得很好,编译没有问题.

事实上,我们必须支持仅支持ES5代码的旧浏览器.

在项目中,我们集成了一些用ES6编写的外部库(reconnecting-websocket就是一个例子).

问题

在使用这些外部代码编译我们的项目之后,vue-cli生成的代码具有ES6代码.

例如,我们chunk-vendors.js有这个代码:

/*!
 * 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=()=>{.所以在旧浏览器中运行此代码会中断.

这是我们的.browserlistrc文件,因为它似乎是在Vue CLI 3中添加浏览器支持的推荐方法:

> 1%
last 2 versions
not ie <= 8
Android >= 4

似乎vue CLI正确地在ES5中转换应用程序代码.但它并没有对供应商进行另一次传递.

是否有任何方法可以使用CLI v3配置vue项目,以便在构建之后进行最终的传输,以确保文件与ES5兼容？

我们认为嵌入式babel和webpack会自动执行,但似乎并非如此.

我们尝试使用该transpileDependencies选项,vue.config.js但它没有改变任何东西,并且胖箭头仍然存在于供应商块中.

Answer 1

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"]
};

This should now use babel to transpile external modules.

This should be used in conjunction with the transpileDependencies option in vue.config.js.