npm install --save-dev @babel/core @babel/cli @babel/preset-env
touch babel.config.json
touch .browserslistrc

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

// .browserslistrc
> 0.25%
not dead

@babel/core

Babel 的核心功能

@babel/cli

命令行使用的工具

@babel/preset-env

• 转换 JavaScript 最新的 Syntax
• 转换 JavaScript 最新的 API
• stage 3 以上

参数

useBuiltIns

如何处理 polyfills

usage

根据环境每个文件都会引入 polyfills

corejs

• 建议指定次要版本
• 如果想使用 proposals
  • useBuiltIns: usage
    • shippedProposals :true 浏览器中发布了一段时间的提案
    • { version: "3.8", proposals: true } core-js@3.8 支持的提案

@babel/plugin-transform-runtime

npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime // 需要根据 core-js 选项安装

• 重用 babel helper
• 解决 polyfill 全局污染
• 不得设置 @babel/preset-env 中的 useBuiltIns 选项

如果需要提案，使用 {proposals: true}

• 如果是业务项目开发者：@babel/plugin-transform-runtime ，建议关闭 corejs，polyfill 的引入由 @babel/preset-env 完成，即开启 useBuiltIns（如需其他配置，自行根据诉求配置）。

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "useBuiltIns": "usage",
        "corejs": {
          "version": 3,
          "proposals": true
        }
      }
    ]
  ],
  "plugins": [
    [
      "@babel/plugin-transform-runtime",
      {
        "corejs": false
      }
    ]
  ]
}

• 如果是 Library 开发者：@babel/plugin-transform-runtime ，建议开启 corejs，polyfill 由 @babel/plugin-transform-runtime 引入。 @babel/preset-env 关闭 useBuiltIns。

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