Babel在Vue-CLI项目中未为IE11转译chunk-vendors。

Question

我有一个使用Vue-CLI构建的web应用程序，需要支持IE11。在package.json中我们设置了：

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

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

然而，生成的chunk-vendors.x.js文件确实包含...运算符，因此在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上被转译？

- Steve Bennett

---

您的node_modules中有一些使用扩展操作符的依赖项。找出这些依赖项，然后使用vue-cli中的transpileDependecies选项。https://cli.vuejs.org/config/#transpiledependencies - Eric Guan

抱歉，刚看到这个评论。是的，正确的。 - Steve Bennett

Answer 1

答案似乎是，“不是确保所有依赖项都被转译”（这显然会引起很多问题），而是“确保导致问题的具体依赖项已经被转译”。

您可以通过向 `vue.config.js` 添加一行来实现：

transpileDependencies: ['/node_modules/myproblematicmodule/']

- Steve Bennett

---

如何确定哪些模块导致了问题？ - chris

对于Vuetify，我只需要在https://vuetifyjs.com/en/getting-started/quick-start#ie-11-safari-9-support中将'/node_modules/vuetify/'替换为'vuetify'。module.exports = { transpileDependencies: ['vuetify'] } - Elijah Lofgren

它对我没用。在这里，您可以查看我的问题：https://stackoverflow.com/questions/66984414/babel-doesnt-transpile-es6-to-es5-in-production-mode - AEB

你可以通过这个神奇的包 https://www.npmjs.com/package/are-you-es5 来知道哪些依赖需要转译。 - Sam Lahm

此外，您可能需要将 useBuiltIns: 'usage' 更改为 useBuiltIns: 'entry'，请参见此处：https://dev59.com/0bfna4cB1Zd3GeqPvJBW#70095630 - Benny K