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 无法将其检测出来。以下几种方法可以解决：

1. 使用 @vue/babel-preset-app的 polyfills 选项预包含所需要的 polyfill。注意 es6.promise 将被默认包含，因为现在的库依赖 Promise 是非常普遍的。

// babel.config.js
module.exports = {
  presets: [
    ['@vue/app', {
      polyfills: [
        'es6.promise',
        'es6.symbol'
      ]
    }]
  ]
}

2. 将其添加到 vue.config.js 中的 transpileDependencies 选项。这会为该依赖同时开启语法语法转换和根据使用情况检测 polyfill。

3. 使用 useBuiltIns: 'entry' 然后在入口文件添加 import '@babel/polyfill'。这会根据 browserslist 目标导入所有 polyfill，这样你就不用再担心依赖的 polyfill 问题了，但是因为包含了一些没有用到的 polyfill 所以最终的包大小可能会增加。

现代模式

有了 Babel 我们可以兼顾所有最新的 ES2015+ 语言特性，但也意味着我们需要交付转译和 polyfill 后的包以支持旧浏览器。这些转译后的包通常都比原生的 ES2015+ 代码会更冗长，运行更慢。

vue-cli-service build --modern

Vue CLI 提供了一个“现代模式”，会产生两个应用的版本：一个现代版的包，面向支持 ES modules 的现代浏览器，另一个旧版的包，面向不支持的旧浏览器。

了解更多：https://jdc.jd.com/archives/4911