Engineering

babel

6to5

@babel/preset-env：主要转换 syntax（const、let、class、...），可选转换 API（includes、Promise、flat）
- targets：browserslist 或各个浏览器的版本，适配的环境
- useBuiltins：决定 preset-env 如何处理 polyfills，usage 根据使用情况和 targets 注入，entry 入口手动引入 core-js、regenerator-runtime，babel 根据 targets 把使用到的全部引入
- corejs：控制 core-js 版本，是否开启 proposal

1// babel options
2{
3  "presets": [
4    [
5      "@babel/preset-env",
6      {
7        "targets": {
8          "chrome": "58" // 按自己需要填写
9        },
10        "useBuiltIns": "entry",
11        "corejs": {
12          "version": 3,
13          "proposals": true
14        }
15      }
16    ]
17  ],
18  "plugins": []
19}
20
21// 入口文件代码
22import 'core-js/stable';
23import 'regenerator-runtime/runtime';

问题：1. 引入的 polyfill 有些 helpers 模块冗余 2. 业务上 polyfill 可以污染全局，但 lib 不行

@babel/plugin-transform-runtime：polyfill helpers 模块从 @babel/runtime/helpers 引入，解决了冗余问题，polyfill 也不污染全局
- Regenerator aliasing（options.regenerator 可关闭）
- core-js aliasing（options.corejs 可关闭）
- Helper aliasing（options.helpers 可关闭）

业务中：

1{
2  "presets": [
3    [
4      "@babel/preset-env",
5      {
6        "targets": {
7          "chrome": 58 // targets 按浏览器版本引入 polyfill
8        },
9        "useBuiltIns": "usage",
10        "corejs": {
11          "version": 3,
12          "proposals": true
13        }
14      }
15    ]
16  ],
17  "plugins": [
18    [
19      "@babel/plugin-transform-runtime",
20      {
21        "corejs": false // 关闭 transform-runtime 的 corejs，由 preset-env 引入，享受 targets 按浏览器版本引入 polyfill
22      }
23    ]
24  ]
25}

lib 上：

1{
2  "presets": [
3    [
4      "@babel/preset-env", // useBuiltIns 默认为 false，用 transform-runtime 的 corejs
5    ]
6  ],
7  "plugins": [
8    [
9      "@babel/plugin-transform-runtime", // 无法享受 targets，用到的全转换
10      {
11        "corejs": {
12          "version": 3,
13          "proposals": true
14        }
15      }
16    ]
17  ]
18}

由于 targets 在 preset-env 指定，transform-runtime 是一个独立的插件，获取不到 targets，所以用 transform-runtime 享受不污染全局和 helpers 不冗余包体见效的好处时，就无法享受 preset-env 中 targets 按浏览器版本引入 polyfill 以减小包体的好处

于是 babel 在 7.13.0 中将 targets 提到了顶层，所有插件都可以获取 targets，所以 7.13.0 中就可以同时使用 targets 和 transform-runtime 了，相关 issue，issue 中提到的 babel-plugin-polyfill-corejs3 来自 babel/babel-polyfills，在做 babel 的下一代 polyfill 方案