Babel 是一个工具集，主要用于将 ES6 版本的 JS 代码转为 ES5 等向后兼容的 JS 代码：
- 语法转换（剪头函数、async 语法、class、解构等）
- 补齐 API（Promise、Map、Symbol 等，Array.find 等实例新方法）
常用包：
npm install --save-dev
babel-loader // 供 WebPack 转码的 loader
@babel/cli // 命令行转码工具，依赖 core
@babel/core // 核心 npm 包
@babel/preset-env // 提供了 ES6 转换 ES5 的语法转换规则
@babel/polyfill
配置文件（babel.config.js、.babelrc、.babelrc.js 或直接配置在 package.json 中的 babel 下）：
module.exports = {
// 预设，一组工具的集合
presets: [
// @babel/preset-env 的简写
// ‘babel-preset-’可以不写，‘@babel/preset-’不确定
"@babel/env",
"@babel/preset-react",
"@babel/preset-typescript",
["@babel/需要参数的预设", { 参数: true }],
],
// 插件
plugins: [
// babel-plugin-transform-decorators-legacy 的简写
// ‘babel-plugin-’可以不写。‘@babel/plugin-’不确定
"transform-decorators-legacy",
],
};
- 插件比预设先执行
- 插件数组从前向后执行
- 预设数组从后向前执行
预设
babel-preset-latest是 Babel6 时代所有年代 preset 的集合（babel-preset-es2015、babel-preset-es2016、babel-preset-es2017），Babel7 下是@babel/preset-env@babel/preset-typescriptTS 支持@babel/preset-react、@babel/preset-flowreact 支持
插件
@babel/plugin-transform-runtime：复用 babel 注入的 helper 代码从 babel7.4 开始，官方不推荐再使用
@babel/polyfill了，因为它本身其实就是两个 npm 包的集合：core-js与regenerator-runtime。官方推荐直接使用这两个 npm 包。预设@babel/preset-env中已经包含了这两个包
polyfill
单独引入静态的
polyfill.js引入
@babel/polyfill，它 由 core-js@2.X 与 regenerator-runtime 组合而成。引入
core-js/stable和regenerator-runtime/runtime，需要npm install --save core-js regenerator-runtime此时装的是 core-js@3.X，2.X 下没有 stable。
@babel/preset-env 配置
- browserslist
// package.json 或 .browserslistrc
"browserslist": [ // 指定代码最终要运行环境
"> 1%", // 市场份额大于1%的浏览器
"not ie <= 8" // 不考虑IE8及以下
]
很多插件的配置是基于它的，比如 Autoprefixer、postcss 根据此自动增加 CSS 前缀。@babel/preset-env 在转译时也会读取这个配置。
如果没有此配置，Babel 会把所有 ES6 转换 ES5
targets：同 browserslist 配置，优先级高于 browserslist-
useBuiltIns：false | usage | entry。"false" 手动引入，会将 polyfill 全部引入到最终的代码里。"entry" 手动引入，根据目标环境引入。"usage" 自动引入，根据实际用到的 API 针对性引入。module.exports = { presets: [["@babel/env", { useBuiltIns: "usage" }]], plugins: [] }npm install --save-dev @babel/cli @babel/core @babel/preset-env npm install --save @babel/polyfill corejs：2 | 3此项当 useBuiltIns 不为 false 时生效。取值为 3 时需要单独安装 core-js@3modules：auto | amd | umd | systemjs | commonjs | cjs | false是否把 ES6 的模块化语法改成其它模块化语法。ES6 模块方便 Webpack 进行静态分析（如 tree shaking 优化）
@babel/runtime 和 @babel/plugin-transform-runtime
@babel/runtime 用于把辅助函数们（polyfill 自己定义的 Promise 等）统一放入一个包里，以达到复用、减小最终包大小的目的。
@babel/plugin-transform-runtime：将最终包中的辅助函数们替换为 @babel/runtime 的统一包（打包后的引用地址为@babel/runtime/helpers/XXX）
npm install --save @babel/runtime
npm install --save-dev @babel/plugin-transform-runtime
// babel.config.js
{
"presets": [
"@babel/env"
],
"plugins": [
"@babel/plugin-transform-runtime"
]
}
@babel/plugin-transform-runtime 的第二个作用是**防止环境污染**：babel-polyfill 或 core-js/stable 与 regenerator-runtime/runtime 补齐 API 的方式是全局重新定义，环境原始的 API 会被覆盖掉，称为环境污染。此插件可以重命名 API，且不需要全局引入。
使用此插件不再需要 babel-polyfill 或 core-js/stable 与 regenerator-runtime/runtime。
npm install --save @babel/runtime-corejs3
npm install --save-dev @babel/plugin-transform-runtime
"plugins": [
["@babel/plugin-transform-runtime", {
"corejs": 3
}]
]
@babel/plugin-transform-runtime 的完整/默认配置：
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"helpers": true, // 自动引入辅助函数包
"corejs": false, // API转换以避免污染全局环境
"regenerator": true, // Generator与async转换API代码
"useESModules": false, // 是否使用ES6的模块化用法
"absoluteRuntime": false,
"version": "7.0.0-beta.0"
}
]
]
关于版本，工具集围绕 core 主包的版本号变化。包名为@babel/XX 的为 Babel7，包名为 babel-XX 的为 Babel6
