在 Vue-CLI 项目中，Babel 没有为 IE11 转换块供应商

Posted 2023-02-22

【中文标题】在 Vue-CLI 项目中，Babel 没有为 IE11 转换块供应商

【英文标题】：Babel not transpiling chunk-vendors for IE11, in Vue-CLI project

【发布时间】：2019-08-03 13:54:44

【问题描述】：

我有一个需要支持 IE11 的 Vue-CLI webapp。在 package.json 我们设置了：

"browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8",
    "ie 11"
  ]

这似乎适用于生成的 app.x.js 文件：例如，它们不包含任何 ... 运算符。

但是，生成的chunk-vendors.x.js do 包含... 运算符，因此在 IE11 上失败。

package.json 的相关部分：

  "devDependencies": 
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "pug": "^2.0.3",
    "pug-plain-loader": "^1.0.0",
    "vue-cli-plugin-pug": "^1.0.7",
    "vue-template-compiler": "^2.5.21"
  ,

vue.config.js 没有相关变化，所以使用默认行为。

我需要进行哪些更改才能确保 chunk-vendors.x.js 被转译为 IE11？

【问题讨论】：

您在 node_modules 中有一些使用扩展运算符的依赖项。找出哪些，然后使用 vue-cli transpileDependecies 选项。 cli.vuejs.org/config/#transpiledependencies

Doh，直到现在才看到这条评论。是的，正确。

【参考方案1】：

答案似乎是，与其说是“确保所有依赖项都被转译”（这显然会导致很多问题），不如说是“确保导致问题的特定依赖项被转译”。

您可以通过在vue.config.js 中添加一行来做到这一点：

transpileDependencies: ['/node_modules/myproblematicmodule/']

【讨论】：

关于识别哪些模块导致问题的任何提示？

嗯，就我而言，我认为这很明显，因为有一个特定的错误消息 - 但我不记得更多了。

对于 Vuetify，我需要简单地从 vuetifyjs.com/en/getting-started/… module.exports = transpileDependencies: ['vuetify']

中放置 'vuetify' 而不是 '/node_modules/vuetify/'

@SteveBennett 如何理解需要转译的依赖项？

这对我来说没什么区别。我可以看到问题出在“vue-masonry”中，并且我在 transpileDependencies 中尝试了“/node_modules/vue-masonry/”或“vue-masonry”，但没有区别。正如其他帖子所说，我还尝试在我的 main.js 中导入“core-js/stable”和“regenerator-runtime/runtime”，但我仍然得到相同的错误