基本构成
babel-core:
- 只包括 parse 和 output 部分
- 不做任何转换
- 可以通过bundler工具使用它(webpack rollup)
babel-polyfill babel-runtime
- 提供不能转换的部分(API，比如promise，Object.assign)，用以模拟转换es2015+到es5
- 依赖
regenerator(generators polyfill),core-js(剩余polyfill部分) - 两者不同点在于，
babel-polyfill的引入污染全局变量(相当于全局引入)，babel-runtime对源码进行转换(提供转换函数包装源码)，不污染全局环境 -
babel-runtime不是所有API都能够处理
babel plugins
- 代码转换，即具体的（语法）代码转换由plugin实现
- babel syntax / transform plugin
-
stage-x不推荐使用了
babel-preset-env
- 根据具体环境(
target选项 node/ browserslist / electron)提供针对性的插件合集 -
buildIns选项，提供babel-polyfill的引入
core-js
- 它是JavaScript标准库的polyfill
- 它通过尽可能的模块化，让你能选择你需要的功能
- 它可以不污染全局空间
- 它和babel高度集成，可以对core-js的引入进行最大程度的优化
- 最新版本core-js@3 ，babel@7.4 以上请使用 core-js@3+，新的语法提案会在 core-js@3+实现
来配置一下
// babel.config.js
module.exports = {
presets: [
[
'@babel/preset-env',
{
useBuiltIns: 'usage',
// 该配置项决定 preset 如何处理polyfill
// "usage" | "entry" | false, defaults to false.
// usage: 根据源码和target 自动引入polyfill，此时不需要在app入口引入 polyfill
// entry：该选项会将 import "core-js/stable" 或import "regenerator-runtime/runtime" （或者cjs格式的引入） 替换为 所有的polyfill
// 即一行代码表示占位，通过替换引入所有polyfill，省位置
corejs: 3
// 2, 3 or { version: 2 | 3, proposals: boolean }, defaults to 2.
// corejs 仅在 useBuildIns: usage/entry 时生效，
// 该选项只决定使用的是什么版本的corejs
// babel 7.4.0 以上需要安装使用 core-js@3 版本，同时注意entry时入口的使用方式
}
]
],
plugins: [
[
'@babel/plugin-transform-runtime', // 该插件依赖 @babel/runtime 需要安装
{
helpers: true,
// default: true
// 是否使用helper转换源码 preset-env: useBuiltIns: usage 下使用
regenerator: true,
// default: true
// 转换 regenerator-runtime
// 非 useBuiltIns: usage 时使用 ，usage下已通过polyfill引入
corejs: false,
// false, 2, 3 or { version: 2 | 3, proposals: boolean }, defaults to false.
// 转换core-js 以及对应版本
// 通常项目应用不需要开启，全局已经通过preset-env引入了
// 如果是开发供他人用的库，根据需要开启，避免不同polyfill实现不同导致功能失效
absoluteRuntime: require('path/to/@babel/runtime/package.json'), // 指定runtime版本
version: require('@babel/helpers/package.json').version // 同样指定版本，以免出现依赖版本错误
}
]
]
}
// src.js
// entry 时使用，usage时不要加上，由插件自动加入，false时手动选择自己需要的插件
// 另外 babel/polyfill 实际包含以下两个库，只是从babel 7.4 (使用core-js@3) 以后需要分开引入
import "core-js";
import "regenerator-runtime/runtime";
// babel 7.4 以下版本使用，注意 @babel/polyfill 为 core-js@2版本
import '@babel/polyfill';
小小总结一下
配置babel时，preset-env作为plugin引入的基础，提供 target / broswerlist 指定不同环境下的babel转换。
需要注意preset-env和babel-runtime 存在对源码转换重复的地方。
一般来说，app配置 useBuildIns: usage 时，动态引入polyfill和plugin，babel-runtime配置为不转换core-js和regenerator，由于app为一个整体，可以全局引入polyfill，如果有特别的第三方库需要单独配置。此外，现在大部分脚手架工具(vue-cli cra)默认不转换node_modules的第三方库。
如果项目不在乎polyfill大小，也可以 useBuildIns: entry 入口引入core-js 和 regenerator-runtime/runtime ，此时不需要引入runtime helper。
如果开发的是一个需要带polyfill且避免污染全局环境的第三方库，那么则配置为 useBuildIns: false babel-runtime 配置 core-js-: 3 helper: true regenerator: true 由runtime配置polyfill。
可能会遗忘的内容
plugins 和 presets 的顺序
presets 从后往前加载(配置项的数组从后往前)，历史原因：原来的用户大多数会["es2015", "stage-0"]的形式书写，新的提案往往写在后面，新提案可能会依赖了ES6的语法，因此需要先解析到ES6再转ES5。
plugins 按照数组顺序从第一个到最后一个编译。
参考文章
结合Babel 7.4.0 谈一下Babel-runtime 和 Babel-polyfill
Babel学习系列3-babel-preset,babel-plugin
Babel学习系列4-polyfill和runtime差别(必看)
babel-polyfill vs babel-plugins -- stackoverflow
网友评论