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