Babel 是一個編譯器（輸入源碼 => 輸出編譯后的代碼）。就像其他編譯器一樣，編譯過程分為三個階段：解析、轉(zhuǎn)換和打印輸出。

Babel的核心功能位于 @babel/core 模塊中。安裝：

npm install --save-dev @babel/core

現(xiàn)在，Babel 雖然開箱即用，但是什么動作都不做。它基本上類似于 const babel = code => code; ，將代碼解析之后再輸出同樣的代碼。如果想要 Babel 做一些實(shí)際的工作，就需要為其添加插件。

要將 ES2015+ 語法轉(zhuǎn)換為 ES5，我們可以安裝以下官方插件 plugin：

npm install --save-dev @babel/plugin-transform-arrow-functions

現(xiàn)在，我們代碼中的所有箭頭函數(shù)都將轉(zhuǎn)換為ES5兼容的函數(shù)表達(dá)式：

const fn = () => 1;
// converted to
var fn = function fn() {  return 1;};

除了一個一個的添加插件，你還可以以預(yù)設(shè) preset 的形式啟用一組插件。

npm install --save-dev @babel/preset-env

babel 在編譯時(shí)候，會把源代碼分為兩部分來處理：語法 syntax、API。語法 syntax 比如 const、let、模版字符串、擴(kuò)展運(yùn)算符等。API 比如 Array.includes() 等新函數(shù)。

預(yù)設(shè)/插件只會處理第一部分，也就是語法部分。@babel/polyfill，它是被用來處理上述說的 API 部分的：為瀏覽器不支持的 API 提供對應(yīng)的兼容性代碼，很明顯如果你不提供，如果在不支持的瀏覽器里面使用了新 API ，那么你的頁面就會掛掉。

{  "presets": [    [      "@babel/env",      {        "useBuiltIns": "entry",        "corejs": "3"      }    ]  ]}// 然后你需要在你的項(xiàng)目入口文件中頂部引入polyfill。import '@babel/polyfill'。

從 babel V7.4.0 版本開始，已經(jīng)不建議使用該包，建議使用 core-js/stable（JS語法）、regenerator-runtime/runtime （函數(shù)運(yùn)行時(shí)）替代。

{  "presets": [    [      "@babel/env",      {        "useBuiltIns": "entry",        "corejs": "3"      }    ]  ]}// 然后你需要在你的項(xiàng)目入口文件中頂部引入polyfill。import "core-js/stable";import "regenerator-runtime/runtime";。

@babel/polyfill 依賴 corejs，corejs 是語法包，里面提供了很多的 ES6 語法，目前有兩個版本，默認(rèn) core-js@2 版本，還有 core-js@3 版本，版本越高，支持的語法越多，包越大。

@babel-polyfill會帶來的一些問題。

1、代碼體積大，因?yàn)闀繉?dǎo)入，不管你用不用的上。

改善方式是通過按需加載。

{  "presets": [    [      "@babel/env",      {        "targets": {          "chrome": "58",          "ie": "11"        },        "useBuiltIns": "usage",        "corejs": "3"      }    ]  ]}

2、會造成全局污染，比如引入新的全局對象或者修改現(xiàn)有對象原型。

@babel/runtime，是一個底層依賴，是一個生產(chǎn)環(huán)境依賴，需要被打包到最終的產(chǎn)物中，它本身會提供的是regenerator-runtime、以及各種helper函數(shù)。

我們?nèi)粘８嗟氖褂玫降氖?@babel/plugin-transform-runtime，這是一個開發(fā)環(huán)境依賴，插件會依賴到 @babel/runtime、@babel/runtime-corejs3等。

關(guān)于@babel/plugin-transform-runtime我們需要知道兩點(diǎn)，1、babel在轉(zhuǎn)碼syntax過程中，會加入自己定義的很多babel函數(shù)，這些babel函數(shù)可能會在每個文件都被重復(fù)引用，transform-runtime會把這些重復(fù)的helper函數(shù)轉(zhuǎn)換成公共的、單獨(dú)的依賴，節(jié)省轉(zhuǎn)碼后的文件體積。2、解決上述中@babel/polyfill會帶來的一些問題，transform-runtime以沙盒的方式將新特性API對應(yīng)的全局變量轉(zhuǎn)換為core-js、regenerator-runtime的引用。

最后總結(jié)一下，我需要安裝的依賴和配置，通過下面的例子，就可以保證代碼正常使用了：

npm install --save-dev @babel/plugin-transform-runtimenpm install --save @babel/runtimenpm install --save @babel/runtime-corejs3npm install --save-dev @babel/corenpm install --save-dev @babel/preset-env

在.babelrc配置：

{  "presets": [    [      "@babel/env",      {        "targets": {          "chrome": "58",          "ie": "11"        }      }    ]  ],  "plugins": [    [      "@babel/transform-runtime",      {        "corejs": 3      }    ]  ]}