babel.config.js
1 概述
Babel 相当于一个中介，一边是用户，另一边是浏览器。这几年，JavaScript 发生了很大的变化，许多新特性在很多浏览器里都不支持。
Babel 的主要作用就是规避这些问题，可以确保 JavaScript 代码兼容所有的浏览器，比如 IE 11。
2 Babel 的工作原理
Babel 使用 AST 把不兼容的代码编译成 ES15 版本，因为大多数浏览器都支持这个版本的 JavaScript 代码。
2.1 如何设置？
在控制台运行如下命令：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
应用程序的根目录会默认创建一个 babel.config.json 文件。Babel 将遍历 src 目录下的所有 JS 文件。
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
]
}`
把 babel.config.json 添加到 package.json 里。
"build": "./node_modules/.bin/babel src --out-dir build"
然后，执行如下命令：
npm run build
这时，在 build 文件夹里就生成了转换代码。
2.2 @babel/core @babel/cli @babel/preset-env 到底做了哪些事情
@babel/core：Babel 的所有核心功能都在这里
@babel/cli：提供了 CLI 工具，使我们能够运行 npm run build
@babel/preset-env：提供预置功能
3 插件
Babel 使用插件来执行代码转换，插件其实就是用 JavaScript 所写的程序片段。比如@babel/plugin-change-Arrow-function ，它的代码实现如下：
// From this
const fn = () => 1;
// Converted to this
var fn = function fn() {
return 1;
};
上面提到的 @babel/preset-env 本身包含了一组插件，可以处理手动设置插件带来的很多问题，大多数情况下能够智能处理代码。
Polyfill
Polyfill 是 JavaScript 代码片段，兼容原本不支持的旧版浏览器。Polyfill 模块包括core-js和一个自定义的重生器运行时，以模拟完整的ES2015 +环境。如果要使用 PolyFill 必须运行如下命令：
// Install via
npm install --save @babel/polyfill
// Add via
import "core-js/stable";
import "regenerator-runtime/runtime";
4 Babel 配置文件的优先级
从低到高依次为：
babel.config.json
babelrc.json
@babel/cli
依照优先级，babel.config.json 会被 . babelrc 覆盖，依次类推。
5 Babel 有哪些值得注意的选项
以下面的配置为例：
{
"presets":
[
[
"@babel/env",
{
"targets":
{
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
},
"useBuiltIns": "usage",
"corejs": "3.6.5"
}
]
],
}
如果要缩减输出代码，需要增加选项 "minified": true
如果要忽略某些文件，则添加 ignore: ["file or directory path"]
只编译特定的文件或文件夹，则添加
// For Files
"only" : ["./src/some_file.js"],
// For Directory
"only" : ["./src"],
链接：https://blog.csdn.net/alexwei2009/article/details/125268933