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：
- 首先：
npm install --save-dev @babel/preset-stage-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