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

Question

我们有一个vue-cli 3项目。它运行良好，编译也没有问题。

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

在该项目中，我们集成了一些以ES6编写的外部库（例如“reconnecting-websocket”）。

问题是

在将这些外部代码与我们的项目一起编译后，vue-cli生成的代码是ES6代码。

例如，我们的“chunk-vendors.js”文件包含以下代码：

/*!
 * Reconnecting WebSocket
 * by Pedro Ladaria <[e-mail]>
 * 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。但它没有对供应商进行另一次处理。

是否有办法配置vue项目，使用CLI v3，在构建后进行最终的转码以确保所有文件都是ES5兼容的？

我们认为嵌入的babel和webpack会自动完成这项工作，但事实并非如此。

我们尝试在vue.config.js中使用transpileDependencies选项，但它没有改变任何内容，厚箭头仍然存在于vendor块中。

- BlackHoleGalaxy

---

在旧版本的Vue中，有一个名为webpack.base.config.js的文件，其中你可以定义webpack模块。所以有这个规则：test: /\.(js|vue)$/, include: [resolve('src'), resolve('test')]，通常人们会把node_modules放在里面。但是这样转义会变得非常慢。我想知道现在这是如何工作的 :) - Andrey Popov

https://github.com/vuejs/vue-loader/issues/1411 这个问题可能会解决您的问题。您需要将Babel配置文件从.babelrc更改为babel.config.js。 - whbb

什么是解决方案？ - dyesdyes

暂无任何文本。 - BlackHoleGalaxy

Answer 1

在与您的vue.config.js文件相同的目录下创建名为babel.config.js的文件。

在这个文件中，您需要添加以下内容：

process.env.VUE_CLI_BABEL_TRANSPILE_MODULES = true;
module.exports = {
  presets: ["@vue/app"]
};

现在应该使用Babel来转译外部模块。

这应与vue.config.js中的transpileDependencies选项一起使用。

- Molemann

---

它可以工作！但是有一个小问题：你应该在 babel.config.js 中列出每个你想要转译的依赖项：transpileDependencies: ['dateformat', 'query-string', 'strict-uri-encode', 'split-on-first']。 - NikitaK

无法更多地点赞 :) 找了一天才找到。 - beerwin

@NikitaK，babel.config.js 不是正确的位置，正如我在原始答案中所述，您应该使用 transpileDependencies 选项在 vue.config.js 文件中列出要转译的依赖项，如文档所述。 - Molemann

@se22as 没问题，很高兴能够帮助。 - Molemann

@Molemann，实际上我之前说我的应用程序已经工作了是错误的，它仍然无法正常工作。我之前回复说它正在工作是因为我错误地测试了我的React或Angular版本的同一应用程序。我已经使用一个非常简单的砖瓦测试应用程序重现了这个问题，并将其放在了我的github账户https://github.com/se22as/test-vue-masonry上。 - se22as