一、 關于Babel
Babel 是一個JavaScript編譯器
Babel 主要用于將采用 ECMAScript 2015+ 語法編寫的代碼轉換為向后兼容的 JavaScript 語法，以便能夠運行在當前和舊版本的瀏覽器或其他環境中。
babel 有3種使用方式： 命令行（cli）;構建工具的插件 (webpack 的 @babel/loader）；單體文件 (standalone script)
3種使用方式只是入口不同，其核心都相同， 即包括3個步驟：
babel 總共分為3個階段：解析，轉換，生成。
- 解析階段： @babel/parser 將源碼解析成AST
- 轉換階段： @babel/core本身不具有任何轉化功能，它把轉化的功能都分解到一個個 plugin 里面
- 生成階段：@babel/generator將轉好的AST重新生成代碼
常說的 plugins & presets 的配置 就是 使用babel時主要的配置參數，如下：使用babel工具可以在3處配置： .babelrc/.babelrc.js 、package.json 的 babel 、babel.config.js
另外需要注意的是： babel 轉換只能處理語法，不能處理新增的API。對于API的處理需要使用polyfill。
二、Plugins
babel 本身不具有任何轉化功能，它把轉化的功能都分解到一個個 plugin 里面。因此當我們不配置任何插件時，經過 babel 的代碼和輸入是相同的：
一個插件一般支持一個語法的轉化（插件是小型的 JavaScript 程序）， 如添加插件@babel/plugin-transform-arrow-functions， 然后使用@babel/cli 編譯：
npm install --save-dev @babel/plugin-transform-arrow-functions
npx babel src --out-dir dir --plugins=@babel/plugin-transform-arrow-functions
一個插件支持一個語法。對于一套規范（比如 es2015 ）包含大概十幾二十個轉譯插件。如果每次要開發者一個個添加并安裝，配置文件很長不說，npm install 的時間也會很長，更不談我們可能還要同時使用其他規范。 所以 就有了插件套餐preset。
各規范下的插件列表： https://www.babeljs.cn/docs/plugins-list
三、Presets
安裝@babel/preset-env， 使用@babel/cli 編譯：
npm install --save-dev @babel/preset-env
npx babel src --out-dir dir --presets=@babel/env
官方提供的Presets包：
- @babel/preset-env for compiling ES2015+ syntax
- @babel/preset-typescript for TypeScript
- @babel/preset-react for React
- @babel/preset-flow for Flow
其中最重要的需要關注的是 @babel/preset-env
四、Polyfill
babel 默認只轉換 js 語法，而不轉換新的 API； 對于新API 需使用Polyfill
用法1： 在所有代碼運行之前增加 require(‘babel-polyfill’)
用法2： webpack.config.js 中將 @babel/polyfill 作為第一個 entry
注意：必須把 @babel/polyfill 作為 dependencies 而不是 devDependencies
使用@babel/polyfill 存在的問題：
1、@babel/polyfill 會導致打出來的包非常大，因為@babel/polyfill 是一個整體，把所有方法都加到原型鏈上。這個問題可以通過單獨使用 core-js 的某個類庫來解決，core-js 都是分開的。
2、@babel/polyfill 會污染全局變量，給很多類的原型鏈上都作了修改
babel7 后推薦使用 core-js/stable 和 regenerator-runtime/runtime
或者使用@babel/preset-env 中的useBuiltIns 配置
五、最重要的Preset @babel/preset-env
preset-env配置：
{
"presets": [
[
"@babel/preset-env",
{
"modules": false,
"useBuiltIns": "usage",
"corejs": 3
}
]
]
}
module：用來設置是否把ES6的模塊化語法改成其它模塊化語法，默認為 auto，也就是會將ESM轉為CJS。項目配置設置module為false也就是仍使用ESM，這樣在webpack打包時可以使用 tree-shaking 去除無用代碼減小包體積。
useBuiltIns：該配置項的值有 entry、usage、false。該配置主要和polyfill的行為相關。
值為false。preset-env不做額外處理，需要在入口文件引入 @babel/polyfill（全量）
-
值為entry。在入口文件引入 @babel/polyfill，轉碼時會根據 browerlist 引入polyfill。 由于 @babel/polyfill 推薦使用 core-js/stable 和 regenerator-runtime/runtime 替換，所以會有提示。替換為core-js后 如下：image.png替換為core-js.png
-
值為usage。不用再顯示引入 polyfill文件，轉碼時會根據 browerlist 和 編寫的代碼按需引入polyfill。
使用usage 時，不需要再引入 @babel/polyfill or core-js。 如下：image.png直接使用usage.png
六、其他重要的包
@babel/cli： 命令行中使用， 如上面的使用方式
-
@babel/node ： 命令行中直接執行+轉譯node文件，@babel/node = @babel/register + @babel/polyfill。 即 可以直接 @babel/node xxx.js, 如圖所示：i@babel/node.png
@babel/register : 用法： require("@babel/register"); node 后續運行時所需要 require 進來的擴展名為 .es6、.es、.jsx、 .mjs 和 .js 的文件將由 Babel 自動轉換。實時轉碼，所以 只適合在開發環境使用。
-
@babel/runtime
語法轉換時， 創建了helper函數。而在實際項目中我們的js文件很多，在語法轉換過程中每個文件都會創建很多這種helper函數，這樣會導致最終生成的包體積十分臃腫。
image.png
這個時候 @babel/runtime 上場了，涉及到語法轉換的helper函數都打包到 @babel/runtime 中，所以在語法轉換的時候不用重復創建，只要引入 @babel/runtime 內的模塊就可以了。
但是打包的文件那么多，總不可能每個都手動修改吧。 這時候就需要@babel/plugin-transform-runtime 了。
運行環境使用, 放在 dependencies中 而不是devDe..
-
@babel/plugin-transform-runtime
@babel/plugin-transform-runtime 這個包的作用就是移除語法轉換生成的helper函數，然后使用 @babel/runtime 中的輔助函數來替換。這樣就避免了我們手動替換也減小了包的體積。
image.png @babel/loader
與webpack等構建工具交互,可在webpack中配置，優先級最高@babel/parser
原babel 解析語法的內核 babylon@babel/core
babel 核心功能， 執行下面代碼：
var babelCore = require("@babel/core");
var sourceCode = `let fn = (num) => num + 2`;
var options = {
//是否生成解析的代碼
code: true,
//是否生成抽象語法樹
ast: true,
//是否生成sourceMap
sourceMaps: true,
plugins: [],
presets: [],
};
babelCore.transform(sourceCode, options, function (err, result) {
console.log(sourceCode);
console.log(result.code);
console.log(result.map);
console.log(result.ast);
});
七、思維導圖
我將上面的思路整理成了思維導圖，方便記憶。 自行取用。
參考文檔：
1、 一口(很長的)氣了解 babel
2、一文徹底讀懂Babel
hi~~ 學廢了嗎~
