什么是Babel？
Babel 是一個工具鏈，主要用于在舊的瀏覽器或環境中將 ECMAScript 2015+ 代碼轉換為向后兼容版本的 JavaScript 代碼。
主要做的事情：
- 語法轉換
- 實現目標環境缺少的功能（es2015+）
- 源代碼轉換 (codemods)
- 還有更多！（點開這些視頻看看）
用法
在這里會介紹如何將用es2015+寫的JavaScript代碼轉換為能在當前瀏覽器正常執行的代碼。包括兩方面：語法轉換、功能補充（這里暫時叫這個名字，之后會相信介紹）。
- 安裝這些必要的包
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
- 在根目錄創建一個babel.config.js的配置文件：
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
},
],
];
module.exports = { presets };
- targets：表示編譯出的代碼想要支持的瀏覽器版本
- useBuiltIns：之后詳細解釋
- 執行命令
./node_modules/.bin/babel src --out-dir lib
然后你用es2015+編寫的代碼就被轉化為能在目標瀏覽器正常運行的代碼了。
如何運行的？
所有你用到的babel包都是被單獨發布在@babel作用域下（v7開始），比如@babel/preset-env、@babel/core、 @babel/cli，因為babel是插拔式的，所以用到什么安裝什么，每個包各司其職。
@babel/core
其中最核心的包就是@babel/core，它主要的作用就是編譯：
npm install --save-dev @babel/core
然后你可以在代碼里直接使用：
const babel = require("@babel/core");
babel.transform("code", optionsObject);
這里的optionsObject就和之前的babel.config.js是一樣的，如何編譯代碼，編譯成什么樣子什么標準用什么東西都在這里配置。
@babel/cli
為什么我們能在命令行里直接使用：
./node_modules/.bin/babel src --out-dir lib
光有core是無法在命令行使用這些功能的，@babel/cli支持你直接在命令行中編譯代碼。
這句話會編譯你src目錄下的所有js代碼，并編譯成你想要的那樣（babel.config.js配置的），并輸出到lib目錄下。
如果我們沒有配置babel.config.js，那么執行這句話之后src會被原封不動的搬到lib下（格式除外）。
--out-dir 代表輸出到哪個目錄下，你可試試--help看其他的用法，如果在這里我們沒有配置babel.config.js，我們可以通過--plugins 或者 --presets告訴 代碼應該編譯成什么樣子。
Plugins & Presets
plugins顧名思義就是組件，一個小型的js代碼程序告訴Babel
如何轉換你的源碼，你可以自己寫plugins也可以在github上使用別人寫好的。來看如何使用一個插件：@babel/plugin-transform-arrow-functions ：
npm install --save-dev @babel/plugin-transform-arrow-functions
./node_modules/.bin/babel src --out-dir lib --plugins=@babel/plugin-transform-arrow-functions
@babel/plugin-transform-arrow-functions組件的作用就是將es2015的箭頭函數轉換成普通函數：
// src/foo.js：
const fn = () => 1;
// converted to
// lib/foo.js：
var fn = function fn() {
return 1;
};
當然，es2015有這么多新的語法，我們不可能一一的去引用每個plugins來編譯我們的代碼吧，于是就又了presets，顧名思義——預設，它包含了一組我們需要的plugins。就像plugin一樣，你也可以編寫一組你最需要的plugins成為一個preset。
目前這里有一個非常優秀的preset叫env —— @babel/preset-env。
npm install --save-dev @babel/preset-env
./node_modules/.bin/babel src --out-dir lib --presets=@babel/env
不需要任何配置，這個preset包含了所有現代js（es2015 es2016等）的所有新特性，你也可以傳遞一些配置給env，精準實現你想要的編譯效果。
配置
更具你的需求，配置肯定是不一樣的，這里貼一個官方推薦配置：
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
},
],
];
module.exports = { presets };
這個配置只配置了prsets，其實還可以配置plugins。
Polyfill
中文翻譯是墊片，之前沒有詳細了解babel之前，我也很迷茫這個polyfill是啥，因為語法不都給你轉換好了，還需要這個東西干啥，后來仔細想了一下，要適應新特性應該從兩方面入手：
- 語法轉換：
() => {};
for (let i of items) {};
比如箭頭函數、for...of，在不支持這些語法的環境下，直接會報語法錯誤，因為編譯器根本不知道 =>這些是什么鬼符號，要做到讓編譯器識別，那就要將這樣的語法轉換成瀏覽器能識別的代碼，那么就需要語法轉換。
然后這里回到我們最開始安裝包那里：
npm install --save-dev @babel/core @babel/cli @babel/preset-env
npm install --save @babel/polyfill
仔細看我們安裝core cli env都是 --save-dev，這是因為我們發布的代碼都是編譯好的代碼，這些都只是開發依賴，發布的代碼不需要依賴這些包。
- 功能補充
'foo'.includes('f');
es2015里不僅只有新的語法，還有實例的擴展，比如String，其實這里只是調用了String實例的一個方法，我們無論怎么語法轉換也沒有什么用吧，如果我們在不支持String.prototype.includes的編譯器里跑這些代碼，會得到 'foo'.includes is not a function. 這樣的一個報錯，而不是語法報錯。
Polyfill提供的就是一個這樣功能的補充，實現了Array、Object等上的新方法，實現了Promise、Symbol這樣的新Class等。到這里應該能明白了，為什么安裝@babel/polyfill沒有-dev，因為就算代碼發布后，編譯后的代碼依然會依賴這些新特性來實現功能。
雖然@babel/polyfill提供了我們想要的所有新方法新類，但是這里依然存在一些問題：
- 體積太大：比如我只用了String的新特性，但是我把整個包都引進來了，，這不是徒增了很多無用的代碼。
- 污染全局環境：如果你引用了
@babel/polyfill，那么像Promise這樣的新類就是掛載在全局上的，這樣就會污染了全局命名空間。可能在一個團建建立的項目問題不太大，但是如果你是一個工具的開發者，你把全局環境污染了，別人用你的工具，就有可能把別人給坑了。
一個解決方案就是引入transform runtime 來替代 @babel/polyfill。
幸運的是，我們有env這個preset，它又一個useBuiltIns選項，如果設置成"usage"，那么將會自動檢測語法幫你require你代碼中使用到的功能。
const presets = [
[
"@babel/env",
{
targets: {
edge: "17",
firefox: "60",
chrome: "67",
safari: "11.1",
},
useBuiltIns: "usage",
},
],
];
module.exports = { presets };
比如我在代碼中：
Promise.resolve().finally();
如果在edge17不支持這個特性的環境里運行，將會幫你編譯成：
require("core-js/modules/es.promise.finally");
Promise.resolve().finally();
@babel/plugin-transform-runtime
npm install --save-dev @babel/plugin-transform-runtime
npm install --save @babel/runtime
主要功能：
- 避免多次編譯出helper函數：
Babel轉移后的代碼想要實現和原來代碼一樣的功能需要借助一些幫助函數，比如：
class Person {}
會被轉換為：
"use strict";
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
var Person = function Person() {
_classCallCheck(this, Person);
};
這里_classCallCheck就是一個helper函數，試想下如果我們很多文件里都聲明了類，那么就會產生很多個這樣的helper函數，積少成多增大了代碼體積。
這里的@babel/runtime包就聲明了所有需要用到的幫助函數，而@babel/plugin-transform-runtime的作用就是將所有需要helper函數的文件，依賴@babel/runtime包：
"use strict";
var _classCallCheck2 = require("@babel/runtime/helpers/classCallCheck");
var _classCallCheck3 = _interopRequireDefault(_classCallCheck2);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var Person = function Person() {
(0, _classCallCheck3.default)(this, Person);
};
這里就沒有再編譯出helper函數classCallCheck了，而是直接引用了@babel/runtime中的helpers/classCallCheck。
- 解決
@babel/polyfill提供的類或者實例方法污染全局作用域的情況。
@babel/plugin-transform-runtime會為代碼創建一個沙盒環境，為core-js這里內建的實例提供假名，你可以無縫的使用這些新特性，而不需要使用require polyfill。
"foobar".includes("foo")，這樣的實例方法仍然是不能正常執行的，因為他在掛載在String.prototype上的，如果需要使用這樣的實例方法，還是不得不require('@babel/polyfill')
比如：
var sym = Symbol();
var promise = new Promise();
console.log(arr[Symbol.iterator]());
會被編譯成：
"use strict";
var _getIterator2 = require("@babel/runtime-corejs2/core-js/get-iterator");
var _getIterator3 = _interopRequireDefault(_getIterator2);
var _promise = require("@babel/runtime-corejs2/core-js/promise");
var _promise2 = _interopRequireDefault(_promise);
var _symbol = require("@babel/runtime-corejs2/core-js/symbol");
var _symbol2 = _interopRequireDefault(_symbol);
function _interopRequireDefault(obj) {
return obj && obj.__esModule ? obj : { default: obj };
}
var sym = (0, _symbol2.default)();
var promise = new _promise2.default();
console.log((0, _getIterator3.default)(arr));
這樣像Symbol、Promise這樣的新類也不會污染全局環境了。
用法：
配置在配置文件里，以.babelrc舉例：
無選項配置：
{
"plugins": ["@babel/plugin-transform-runtime"]
}
有選項配置（默認值）:
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"corejs": false,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
這個插件的默認配置默認用戶已經提供了所有polyfillable APIs，因此想要無縫使用不污染全局環境的內建功能需要特別標明corejs。
可選項：
corejs：默認false，或者數字：{ corejs: 2 }，代表需要使用corejs的版本。helpers：默認是true，是否替換helpers。polyfill：v7無該屬性regenerator：默認true，generator是否被轉譯成用regenerator runtime包裝不污染全局作用域的代碼。useESModules：默認false，如果是true將不會用@babel/plugin-transform-modules-commonjs進行轉譯，這樣會減小打包體積，因為不需要保持語義。false:
exports.__esModule = true;
exports.default = function(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
};
- true:
export default function(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
babel-polyfill vs babel-runtime
以下出自：github -了解Babel 6生態
babel-polyfill 和 babel-runtime是達成同一種功能（模擬ES2015環境，包括global keywords，prototype methods，都基于core-js提供的一組polyfill和一個generator runtime）的兩種方式：
babel-polyfill通過向全局對象和內置對象的prototype上添加方法來達成目的。這意味著你一旦引入babel-polyfill，像Map，Array.prototype.find這些就已經存在了——全局空間被污染。
babel-runtime不會污染全局空間和內置對象原型。事實上babel-runtime是一個模塊，你可以把它作為依賴來達成ES2015的支持。
比如當前環境不支持Promise，你可以通過require(‘babel-runtime/core-js/promise’)來獲取Promise。這很有用但不方便。幸運的是，babel-runtime并不是設計來直接使用的——它是和babel-plugin-transform-runtime一起使用的。babel-plugin-transform-runtime會自動重寫你使用Promise的代碼，轉換為使用babel-runtime導出（export）的Promise-like對象。
注意： 所以plugin-transform-runtime一般用于開發（devDependencies），而runtime自身用于部署的代碼（dependencies），兩者配合來一起工作。
那么我們什么時候用babel-polyfill，什么時候用babel-runtime？
babel-polyfill會污染全局空間，并可能導致不同版本間的沖突，而babel-runtime不會。從這點看應該用babel-runtime。
但記住，babel-runtime有個缺點，它不模擬實例方法，即內置對象原型上的方法，所以類似Array.prototype.find，你通過babel-runtime是無法使用的。
最后，請不要一次引入全部的polyfills（如require('babel-polyfill')），這會導致代碼量很大。請按需引用最好。
@babel/preset-env
以下出自：github -Babel 7 及新用法
preset-env 是 JS 中的 autoprefixer 根據環境來應用不同的plugins。支持的plugins超過babel-preset-latest(2015-2017)。
用法：
{
"presets": [
[
"env",
{
"targets": { // 目標環境
"browsers": [ // 瀏覽器
"last 2 versions",
"ie >= 10"
],
"node": "current" // node
},
"modules": true, // 是否轉譯module syntax，默認是 commonjs
"debug": true, // 是否輸出啟用的plugins列表
"spec": false, // 是否允許more spec compliant，但可能轉譯出的代碼更慢
"loose": false, // 是否允許生成更簡單es5的代碼，但可能不那么完全符合ES6語義
"useBuiltIns": false, // 怎么運用 polyfill
"include": [], // 總是啟用的 plugins
"exclude": [], // 強制不啟用的 plugins
"forceAllTransforms": false, // 強制使用所有的plugins，用于只能支持ES5的uglify可以正確壓縮代碼
}
]
],
}
這里主要需要注意的是useBuiltIns用于指定怎么處理polyfill，可以選值"usage" | "entry" | false，默認是false。
-
useBuiltIns: 'usage'：當每個文件里用到（需要polyfill的特性）時，在文件中添加特定的import語句。這可以保證每個polyfill的特性僅load一次。
/// input
var a = new Promise(); // a.js
var b = new Map(); // b.js
/// output
// a.js
import "core-js/modules/es6.promise";
var a = new Promise();
// b.js
import "core-js/modules/es6.map";
var b = new Map();
-
useBuiltIns: 'entry'：替換import "@babel/polyfill" / require("@babel/polyfill")語句為獨立的（根據環境）需要引入的polyfill特性的import語句。
// input
import "@babel/polyfill";
// output
import "core-js/modules/es7.string.pad-start";
import "core-js/modules/es7.string.pad-end";
需要注意，在整個項目中，"@babel/polyfill"只能require一次，否則報錯。建議用獨立的entry文件引入。
-
useBuiltIns: false：對@babel/polyfill不做任何處理。
ReferenceError: regeneratorRuntime is not defined
需要注意，當你使用async/await并被preset-env轉譯后，運行時可能會出現以上錯誤，這是因為：
plugin-transform-regenerator使用regenerator來轉譯 async/generator 函數，但是它本身不包括regeneratorRuntime，你需要使用babel-polyfill/regenerator runtime來使regeneratorRuntime 存在。
通常情況下，加上transform-runtime plugin即可。
