一、 關于Babel

Babel 是一個JavaScript編譯器

Babel 主要用于將采用 ECMAScript 2015+ 語法編寫的代碼轉(zhuǎn)換為向后兼容的 JavaScript 語法他宛，以便能夠運行在當前和舊版本的瀏覽器或其他環(huán)境中捣辆。

babel 有3種使用方式： 命令行（cli）;構建工具的插件 (webpack 的 @babel/loader）；單體文件 (standalone script)

3種使用方式只是入口不同琅摩，其核心都相同铁孵， 即包括3個步驟：

babel 總共分為3個階段：解析，轉(zhuǎn)換房资，生成蜕劝。

• 解析階段： @babel/parser 將源碼解析成AST
• 轉(zhuǎn)換階段： @babel/core本身不具有任何轉(zhuǎn)化功能，它把轉(zhuǎn)化的功能都分解到一個個 plugin 里面
• 生成階段：@babel/generator將轉(zhuǎn)好的AST重新生成代碼

使用babel工具可以在3處配置： .babelrc/.babelrc.js 轰异、package.json 的 babel 岖沛、babel.config.js

cli工具中的參數(shù).png

另外需要注意的是： babel 轉(zhuǎn)換只能處理語法搭独，不能處理新增的API婴削。對于API的處理需要使用polyfill。

二牙肝、Plugins

babel 本身不具有任何轉(zhuǎn)化功能唉俗，它把轉(zhuǎn)化的功能都分解到一個個 plugin 里面。因此當我們不配置任何插件時配椭，經(jīng)過 babel 的代碼和輸入是相同的：

沒有安裝plugin時使用babel編譯.png

一個插件一般支持一個語法的轉(zhuǎn)化（插件是小型的 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

安裝插件后的編譯.png

一個插件支持一個語法股缸。對于一套規(guī)范（比如 es2015 ）包含大概十幾二十個轉(zhuǎn)譯插件衡楞。如果每次要開發(fā)者一個個添加并安裝，配置文件很長不說敦姻，npm install 的時間也會很長寺酪，更不談我們可能還要同時使用其他規(guī)范。 所以 就有了插件套餐preset替劈。

各規(guī)范下的插件列表： 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進行編譯.png

官方提供的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 默認只轉(zhuǎn)換 js 語法盒犹，而不轉(zhuǎn)換新的 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

image.png

或者使用@babel/preset-env 中的useBuiltIns 配置

五行瑞、最重要的Preset @babel/preset-env

preset-env配置：

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "modules": false,
        "useBuiltIns": "usage",
        "corejs": 3
      }
    ]
  ]
}

• module：用來設置是否把ES6的模塊化語法改成其它模塊化語法，默認為 auto餐禁，也就是會將ESM轉(zhuǎn)為CJS血久。項目配置設置module為false也就是仍使用ESM，這樣在webpack打包時可以使用 tree-shaking 去除無用代碼減小包體積帮非。

• useBuiltIns：該配置項的值有 entry氧吐、usage、false末盔。該配置主要和polyfill的行為相關筑舅。

1. 值為false。preset-env不做額外處理陨舱，需要在入口文件引入 @babel/polyfill（全量）

2. 值為entry翠拣。在入口文件引入 @babel/polyfill，轉(zhuǎn)碼時會根據(jù) browerlist 引入polyfill隅忿。
   image.png
   由于 @babel/polyfill 推薦使用 core-js/stable 和 regenerator-runtime/runtime 替換心剥，所以會有提示邦尊。替換為core-js后 如下：
   替換為core-js.png

3. 值為usage背桐。不用再顯示引入 polyfill文件，轉(zhuǎn)碼時會根據(jù) browerlist 和 編寫的代碼按需引入polyfill蝉揍。

   
   
   image.png
   使用usage 時链峭，不需要再引入 @babel/polyfill or core-js。 如下：
   直接使用usage.png

六又沾、其他重要的包

• @babel/cli： 命令行中使用弊仪， 如上面的使用方式

• @babel/node ： 命令行中直接執(zhí)行+轉(zhuǎn)譯node文件，@babel/node = @babel/register + @babel/polyfill杖刷。 即 可以直接 @babel/node xxx.js, 如圖所示：
  i@babel/node.png

• @babel/register : 用法： require("@babel/register"); node 后續(xù)運行時所需要 require 進來的擴展名為 .es6励饵、.es、.jsx滑燃、 .mjs 和 .js 的文件將由 Babel 自動轉(zhuǎn)換役听。實時轉(zhuǎn)碼，所以 只適合在開發(fā)環(huán)境使用。

• @babel/runtime
  語法轉(zhuǎn)換時典予， 創(chuàng)建了helper函數(shù)甜滨。而在實際項目中我們的js文件很多，在語法轉(zhuǎn)換過程中每個文件都會創(chuàng)建很多這種helper函數(shù)瘤袖，這樣會導致最終生成的包體積十分臃腫衣摩。

  
  
  image.png

這個時候 @babel/runtime 上場了，涉及到語法轉(zhuǎn)換的helper函數(shù)都打包到 @babel/runtime 中捂敌，所以在語法轉(zhuǎn)換的時候不用重復創(chuàng)建艾扮，只要引入 @babel/runtime 內(nèi)的模塊就可以了。

但是打包的文件那么多黍匾，總不可能每個都手動修改吧栏渺。 這時候就需要@babel/plugin-transform-runtime 了。

運行環(huán)境使用, 放在 dependencies中 而不是devDe..

• @babel/plugin-transform-runtime
  @babel/plugin-transform-runtime 這個包的作用就是移除語法轉(zhuǎn)換生成的helper函數(shù)锐涯，然后使用 @babel/runtime 中的輔助函數(shù)來替換磕诊。這樣就避免了我們手動替換也減小了包的體積。

  
  
  image.png

• @babel/loader
  與webpack等構建工具交互,可在webpack中配置纹腌，優(yōu)先級最高

• @babel/parser
  原babel 解析語法的內(nèi)核 babylon

• @babel/core
  babel 核心功能霎终， 執(zhí)行下面代碼：

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);
});

image.png

七、思維導圖

我將上面的思路整理成了思維導圖升薯，方便記憶莱褒。 自行取用。

Babel.jpg

參考文檔：

1涎劈、 一口(很長的)氣了解 babel
2广凸、一文徹底讀懂Babel

hi~~ 學廢了嗎~