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

Posted 2023-02-22

【中文标题】Vue CLI 3 不会将供应商转换为 ES5

【英文标题】：Vue CLI 3 does not convert vendors to ES5

【发布时间】：2019-03-07 23:37:01

【问题描述】：

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

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

在项目中我们集成了一些用 ES6 编写的外部库（reconnecting-websocket 就是一个例子）。

问题

用这些externals编译我们的项目后，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 中的应用程序代码。但它并没有对供应商进行另一次传递。

有什么方法可以使用 CLI v3 配置 vue 项目，以在构建后进行最终转译，以确保文件都与 ES5 兼容？

我们认为嵌入式 babel 和 webpack 会自动执行此操作，但似乎并非如此。

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

【问题讨论】：

在旧的 Vue 版本中，有这个 webpack.base.config.js，您在其中定义了 webpack 模块。所以有这个规则：test: /\.(js|vue)$/, include: [resolve('src'), resolve('test')]，通常人们会把node_modules放在那里。但是这样转译变得超级慢。我很想知道它现在是如何工作的 :)

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

解决方案是什么？

还没有

【参考方案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 选项一起使用。

【讨论】：

有效！但是有一个小问题：你应该列出（在babel.config.js 中）你想要转换的每个依赖项：transpileDependencies: ['dateformat', 'query-string', 'strict-uri-encode', 'split-on-first']

不能再投票了 :) 花了一天时间才找到这个。

@NikitaK babel.config.js 不是正确的地方，正如我在原始答案中所述，您应该使用 transpileDependencies 选项在 vue.config.js 文件中列出要转换的依赖项记录在案。

不幸的是，这对我不起作用。在 babel.config.js 中，我有 VUE_CLI_BABEL_TRANSPILE_MODULES 变量，并且存在“@vue/app”，就像@Molemann 在这里的回答一样。在我的 vue.config.js 中，我有 transpileDependencies（我已经尝试过 '/node_modules/vue-masonry/' 和 'vue-masonry' 格式）。我还在 browserslist 下的 package.json 中列出了“IE 11”

@se22as 你能分享一下你的 babel.config.js 和 vue.config.js 文件吗？