Babel 7 轉碼的正確姿勢

JohnLui 發布于2019-08-26 14:01 / 643人閱讀

摘要：轉碼的配置是每位前端童鞋在日常工作中都會遇到的。簡單點來說就是在轉碼過程中，對于一些新語法，都會抽象一個個小的函數，在轉碼過程中完成替換。以上即是我總結的轉碼姿勢，如果對本篇有疑問或建議，歡迎在這里提出。

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

參考資料

Babel Docs

GPU云服務器云服務器正確姿勢可以轉碼的視頻剪輯軟件拍照姿勢姿勢

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/109972.html

babel使用方法總結

摘要：在項目根目錄下創建一個文件，注意這是個配置文件，以點號開頭，沒有后綴。提供了一種可以在瀏覽器中使用的方法，只需兩步就能一勞永逸。 1.在命令行中使用 Babel Babel 官方推薦將 Babel 安裝在本地，因為 Babel 的不同版本以及不同轉碼規則會起到不同的效果，全局安裝會帶來不必要的麻煩。在命令提示符中轉到自己的項目目錄下： npm install --save-dev ba...

沈儉 2019-08-20 14:36 評論0 收藏0
一天快速了解Babel

摘要：在做項目中一直使用的是腳手架搭建的環境，一直沒有仔細的去了解這一工具，這周末抽出一天時間通過官網還有各種博客文章算是了解了一些內容，起碼可以在項目中自己完成的配置了。不過好像目前瀏覽器端對這種諸如之類的方法支持的還不錯了。在做項目中一直使用的是腳手架搭建的環境，一直沒有仔細的去了解 babel 這一工具，這周末抽出一天時間通過官網還有各種博客文章算是了解了一些內容，起碼可以在項目中自...

qiangdada 2019-08-22 18:15 評論0 收藏0
前端工程化

摘要：工程化所謂前段工程自動化就是由于前端分裂，有人寫代碼，有人寫，有人寫，有人寫，那么就需要翻譯工具命令行工具翻譯成或其他所有瀏覽器能運行的代碼版本。自動化舉個例子使用命令行工具實現代碼自動化轉變。工程化所謂前段工程自動化就是：由于前端分裂，有人寫css代碼，有人寫scss，有人寫es5，有人寫es6，那么就需要翻譯工具（命令行工具）翻譯成ie或其他所有瀏覽器能運行的代碼版本。 sho...

CarlBenjamin 2019-08-23 12:31 評論0 收藏0
使用NPM

摘要：另一方面，這樣做也無法支持不同項目使用不同版本的。我們可以換一個源，即把服務器換到國內，例如淘寶的源運行下面的命令即可切換淘寶源的配置被存儲在，你可以隨時改。安裝方法使用方法切換源等見鏈接 Nodejs生態圈很強大，第一個原因就是NPM，因為全球有無數的程序員在NPM中貢獻了自己的力量。為了避免造輪子，我們有時候會用到其他人的勞動成果，比如一些優秀的框架，比如Express，我們直接...

wanghui 2019-08-23 12:30 評論0 收藏0
Babel入門——ES6轉ES5

摘要：首先安裝使用時在文件頭加載然后，就不需要手動對轉碼了。原文轉載自阮一峰教程本文講解如何在nodejs環境下使用babel將ES6代碼轉ES5以及運行ES6的js文件配置.babelrc文件首先安裝es2015的presets字段 $ npm install --save-dev babel-preset-es2015 然后寫入.babelrc { presets:[ ...

stdying 2019-08-22 11:22 評論0 收藏0