一般的es6语法 通过设置预设即可解决

npm install --save-dev @babel/preset-env

//babel.config.json
{
  "presets": [["@babel/preset-env"]],
}

比如这种代码，需要导入polyfill来解决

const isHas = [1, 2, 3].includes(2)
const p = new Promise((resolve, reject) => {
  resolve(100)
})

直接导入全部polyfill，通过webpack打包得到4490行

这种方式明显不得行撒，官方也不推荐了

import '@babel/polyfill'//4490行
const isHas = [1, 2, 3].includes(2)
const p = new Promise((resolve, reject) => {
  resolve(100)
})

preset-env+useBuiltIns 按需导入

• 需要安装core-js@3+设置 "useBuiltIns": "usage"。
• 会自动按需导入所需模块,webpack打包约1330行。
• 缺点：会造成全局变量污染

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "edge": "17",
          "firefox": "60",
          "chrome": "67",
          "safari": "11.1"
        },
        "useBuiltIns": "usage",
        "corejs": "3"
      }
    ]
  ],
}

plugin-transform-runtime实现

• 实现按需加载，并且不会污染全局变量
• 打包行数1700行

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
npm install --save @babel/runtime-corejs3

{
  "presets": [["@babel/preset-env"]],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": 3,
        "version": "^7.22.6"
      }
    ]
  ]
}