在前面的介绍之后，我们来总结下 babel@7.0 版本及以上的配置方法。

浏览器兼容方面，通常有两种：@babel/polyfill 和 @babel/plugin-transform-runtime。

预设方面，通常采用 @babel/preset-env 即可。根据上面采用的 polyfill 和 transform-runtime 不同，preset-env 的配置有所差异。

下面给出对应配置：

polyfill

// babel.config.js
module.exports = {
 presets: [
   ["@babel/preset-env", {
    // 默认采用ES Module, 利于webpack进行tree shaking
    modules: false,
    // 可选值 usage entry false(不推荐entry或false)
    useBuiltIns: "entry",
    // corejs 版本(设置了useBuiltIns的话，corejs是必配的)
    corejs: 3,
    // 目标浏览器 preset-env必须设置，或者利用.browerslistrc文件替代
    targets: [
      "> 1%",
      "last 2 versions",
      "not ie <= 8"
    ]
   }]
 ]
}

如果上面 useBuiltIns 设置的是 entry，那么需要在入口文件中手动引入 polyfill。

另外根据 corejs 设置的版本不同，引入 polyfill 的方式也不同。如下：

// corejs: 2
import '@babel/polyfill'

// corejs: 3
import "core-js/stable"
import "regenerator-runtime/runtime"

transform-runtime

当然，我们知道，babel 已经不推荐直接导入 polyfill 的方式，转而推荐使用@babel/plugin-transform-runtime 插件。

// babel.config.js
module.exports = {
  presets: [
    ["@babel/preset-env", {
      // 采用 EsModule
      modules: false,
      targets: [
        "> 1%",
        "last 2 versions",
        "not ie <= 8"
      ]
    }]
  ],
  plugins: [
    ["@babel/plugin-transform-runtime", {
      // useBuiltIns属性已被默认设置
      // 推荐corejs设置3，因为这个版本支持实例属性
      corejs: 3
    }]
  ]
}

另外，要注意的是，根据 corejs 的版本，需要安装对应的 runtime-corejs。

# corejs: 2
yarn add @babel/runtime-corejs2

# corejs: 3
yarn add @babel/runtime-corejs3