Vue CLI 3使用：浏览器兼容性（四）
我们可以通过配置来使项目兼容某些浏览器。
package.json 文件里的 browserslist 字段 (或一个单独的 .browserslistrc 文件)，指定了项目的目标浏览器的范围。这个值会被 @babel/preset-env 和 Autoprefixer 用来确定需要转译的 JavaScript 特性和需要添加的 CSS 浏览器前缀。browserslist具体使用方法：https://github.com/browserslist/browserslist
Polyfill
Babel中useBuiltIns如果设为 "usage"，Babel 会根据实际代码中使用的代码，以及配置的browserslist，按需引入对应的 polyfill。已确保最终包里 polyfill 数量的最小化。然而，如果其中一个依赖需要特殊的 polyfill，默认情况下 Babel 无法将其检测出来。以下几种方法可以解决：
- 使用
@vue/babel-preset-app的 polyfills 选项预包含所需要的 polyfill。注意es6.promise将被默认包含，因为现在的库依赖 Promise 是非常普遍的。
// babel.config.js
module.exports = {
presets: [
['@vue/app', {
polyfills: [
'es6.promise',
'es6.symbol'
]
}]
]
}
-
将其添加到
vue.config.js中的transpileDependencies选项。这会为该依赖同时开启语法语法转换和根据使用情况检测 polyfill。 -
使用 useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill'。这会根据 browserslist 目标导入所有 polyfill，这样你就不用再担心依赖的 polyfill 问题了，但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。
现代模式
有了 Babel 我们可以兼顾所有最新的 ES2015+ 语言特性，但也意味着我们需要交付转译和 polyfill 后的包以支持旧浏览器。这些转译后的包通常都比原生的 ES2015+ 代码会更冗长，运行更慢。
vue-cli-service build --modern
Vue CLI 提供了一个“现代模式”，会产生两个应用的版本：一个现代版的包，面向支持 ES modules 的现代浏览器，另一个旧版的包，面向不支持的旧浏览器。
