Babel 7 轉碼的正確姿式

Babel 轉碼的配置是每位前端童鞋在平常工做中都會遇到的。剛開始我也是在網上搜索各類配置方法，升級到 Babel 7 的時候又折騰了一把，因此決定把本身的心得和理解記錄下來，但願能幫助到有須要的童鞋。

這裏呢不打算去講每個詳細的配置項，畢竟官方文檔是最權威的。這篇主要是說下 Babel 7 轉碼中會涉及到的幾個主要庫以及他們之間的關係，還有不一樣的項目類型怎麼選擇配置方案和一些技巧。

涉及到的主要庫

首先呢先介紹一下 Babel 7 轉碼涉及到的「四大天王」：

• @babel/preset-env
• @babel/polyfill
• @babel/runtime
• @babel/plugin-transform-runtime

這四個庫有什麼做用和聯繫？相信不少童鞋跟我當初同樣老是有點分不清，下面就來逐一簡單解釋下，固然最詳細的內容仍是要看官方文檔。

@babel/preset-env

這個是 Babel 轉碼的環境預設，會根據你設定的目標環境（例如要支持的瀏覽器版本範圍）來調整語法轉換規則和選擇環境墊片補丁，相比前任的優勢是更智能，打包出來的體積也會更小。

@babel/polyfill

這個能夠模擬基本徹底的 ES6+ 環境（不能低於 Stage 4 的提案）。例如，新的 Class：Promise、Map，靜態方法：Array.from，新的原型方法：Array.prototype.includes 等。但要注意的是，使用 polyfill 的話是會污染全局的，由於要提供原型方法的支持。

注意，這個庫在 Babel 7.4.0 後已被棄用，用下面的代替：

import 'core-js/stable';
import 'regenerator-runtime/runtime';
複製代碼

但思想是同樣的。

@babel/runtime

這個庫提供了一些轉碼過程當中的一些幫助函數。簡單點來講就是在轉碼過程當中，對於一些新語法，都會抽象一個個小的函數，在轉碼過程當中完成替換。好比說咱們寫了一個 class Circle {...}，轉碼後就會變成這樣：

function _classCallCheck(instance, Constructor) {
  //...
}

var Circle = function Circle() {
  _classCallCheck(this, Circle);
};
複製代碼

因此在每次轉換 class 新語法的時候，都會用 _classCallCheck 這個函數去替換。

@babel/plugin-transform-runtime

這個是和上面的 @babel/runtime 配合使用的。延續上面的那個例子，若是你的項目有多個 js 文件裏面有 class 須要轉碼，那每一個文件都會有一個重複的 _classCallCheck 函數定義，plugin-transform-runtime 的一個主要做用就是從統一的地方去引用這些幫助函數，消除代碼冗餘從而減小打包的體積：

var _classCallCheck = require("@babel/runtime/helpers/classCallCheck");

var Circle = function Circle() {
  _classCallCheck(this, Circle);
};
複製代碼

除此以外，他還提供了一個沙盒環境。若是咱們使用 @babel/polyfill 來支持使用一些 ES6+ 的新特性的話（如：Promise、Map 等），會形成全局污染。經過配置 plugin-transform-runtime 的 corejs 選項能夠開啓沙盒環境支持，在當前須要轉碼的文件中單獨引入所需的新功能。

安裝說明

接下來咱們看看上面的四大天王怎麼安裝：

npm install --save @babel/runtime, @babel/polyfill
npm install --save-dev @babel/preset-env, @babel/plugin-transform-runtime
複製代碼

這裏也許有童鞋會有跟我當時一樣的疑問：@babel/runtime 不是打包轉碼過程當中用的嗎，怎麼會安裝爲運行環境依賴呢？——還記得 plugin-transform-runtime 會從統一的地方去引用這些幫助函數嗎，這意味着這些代碼會在運行時執行，因此固然是運行時依賴啦。

而後這裏給你們提供一個小技巧。有時咱們會安裝配置 @babel/preset-stage-x 去使用一些新的提案，當在 Babel 7 中這些 preset-stage-x 已經被棄用了，咱們必須是一個個的安裝所需的插件，還得去改 .babelrc 的配置，挺煩的，怎麼簡化呢？咱們能夠用下面的方法去簡化安裝，好比 stage-2：

1. 首先：npm install --save-dev @babel/preset-stage-2
2. 而後：npx babel-upgrade --write --install

這樣就搞定了。babel-upgrade 這個工具會自動幫你安裝所需的插件，而且把 package.json 和 .babelrc 文件相關的地方都改好，很是好用！

不一樣項目類型的配置建議

這裏咱們主要分爲 npm 庫項目和業務項目來建議配置，僅供你們參考。固然首先 preset-env 是都要安裝的，而後根據你的目標環境作好配置。

npm 庫項目

這個簡單點來講就是你寫了一個第三方庫來給別人使用的，runtime 和 plugin-transform-runtime 確定是都要安裝上的。特別注意 polyfill 不要安裝，個人建議是：由業務項目來負責墊片補丁，由於 polyfill 會污染全局。

業務項目

這個就是咱們的具體業務項目如網站啦什麼的。那麼 runtime、plugin-transform-runtime、和 polyfill 都要安裝上，而且 @babel/preset-env 要配置上 useBuiltIns: 'entry'，這是爲了在項目入口文件上根據目標環境來智能選擇導入哪些 polyfill 而不是所有導入，這是 preset-env 會幫你作的事情（具體請參考 polyfill 文檔），最後別忘記了在入口文件上 import '@babel/polyfill'。

以上便是我總結的 Babel 7 轉碼姿式，若是對本篇有疑問或建議，歡迎在 這裏 提出。

歡迎 star 和關注個人 JS 博客：小聲比比 Javascript

參考資料

• Babel Docs