2023年6月21日发(作者：)

VueCLI3使⽤：浏览器兼容性PolyfillBabel中useBuiltIns如果设为

"usage"，Babel 会根据实际代码中使⽤的代码，以及配置的browserslist，按需引⼊对应的 polyfill。已确保最终包⾥ polyfill 数量的最⼩化。然⽽，如果其中⼀个依赖需要特殊的 polyfill，默认情况下 Babel ⽆法将其检测出来。以下⼏种⽅法可以解决：1. 使⽤

@vue/babel-preset-app的 选项预包含所需要的 polyfill。注意

e 将被默认包含，因为现在的库依赖 Promise 是⾮常普遍的。// s = { presets: [ ['@vue/app', { polyfills: [ 'e', '' ] }] ]}2. 将其添加到

中的 选项。这会为该依赖同时开启语法语法转换和根据使⽤情况检测 polyfill。3. 使⽤ useBuiltIns: 'entry' 然后在⼊⼝⽂件添加 import '@babel/polyfill'。这会根据 browserslist ⽬标导⼊所有 polyfill，这样你就不⽤再担⼼依赖的 polyfill 问题了，但是因为包含了⼀些没有⽤到的 polyfill 所以最终的包⼤⼩可能会增加。现代模式有了 Babel 我们可以兼顾所有最新的 ES2015+ 语⾔特性，但也意味着我们需要交付转译和 polyfill 后的包以⽀持旧浏览器。这些转译后的包通常都⽐原⽣的 ES2015+ 代码会更冗长，运⾏更慢。vue-cli-service build --modernVue CLI 提供了⼀个“现代模式”，会产⽣两个应⽤的版本：⼀个现代版的包，⾯向⽀持 的现代浏览器，另⼀个旧版的包，⾯向不⽀持的旧浏览器。

2023年6月21日发(作者：)

VueCLI3使⽤：浏览器兼容性PolyfillBabel中useBuiltIns如果设为

"usage"，Babel 会根据实际代码中使⽤的代码，以及配置的browserslist，按需引⼊对应的 polyfill。已确保最终包⾥ polyfill 数量的最⼩化。然⽽，如果其中⼀个依赖需要特殊的 polyfill，默认情况下 Babel ⽆法将其检测出来。以下⼏种⽅法可以解决：1. 使⽤

@vue/babel-preset-app的 选项预包含所需要的 polyfill。注意

e 将被默认包含，因为现在的库依赖 Promise 是⾮常普遍的。// s = { presets: [ ['@vue/app', { polyfills: [ 'e', '' ] }] ]}2. 将其添加到

中的 选项。这会为该依赖同时开启语法语法转换和根据使⽤情况检测 polyfill。3. 使⽤ useBuiltIns: 'entry' 然后在⼊⼝⽂件添加 import '@babel/polyfill'。这会根据 browserslist ⽬标导⼊所有 polyfill，这样你就不⽤再担⼼依赖的 polyfill 问题了，但是因为包含了⼀些没有⽤到的 polyfill 所以最终的包⼤⼩可能会增加。现代模式有了 Babel 我们可以兼顾所有最新的 ES2015+ 语⾔特性，但也意味着我们需要交付转译和 polyfill 后的包以⽀持旧浏览器。这些转译后的包通常都⽐原⽣的 ES2015+ 代码会更冗长，运⾏更慢。vue-cli-service build --modernVue CLI 提供了⼀个“现代模式”，会产⽣两个应⽤的版本：⼀个现代版的包，⾯向⽀持 的现代浏览器，另⼀个旧版的包，⾯向不⽀持的旧浏览器。