【工具向】我所知道的babel總結

Leo_chen 發布于2019-08-22 16:32 / 1950人閱讀

摘要：這兩天研究了一下這個工具，因為平時項目基本都是腳手架生成的配置文件，真正自己想寫點東西的時候，親自去配卻是一臉懵逼，寫下這篇博客記錄一下我的認知范圍內的總結。

這兩天研究了一下babel這個工具，因為平時項目基本都是腳手架生成的babel配置文件，真正自己想寫點東西的時候，親自去配卻是一臉懵逼，寫下這篇博客記錄一下我的認知范圍內的babel總結。
首先，先看幾個平時常見的babel配置

圖一：vue的webpack-template生成的babel配置
圖二：react的create-react-app腳手架eject模式生成的babel配置
圖三：一個常見的普通配置，有presets和plugins
這三張圖看完文章應該都可以理解了

babel-core

首先什么是babel？
官網的介紹是：Use next generation JavaScript, today.
簡單的說，就是讓你可以在此時此刻此地使用下一代JavaScript語法和API，babel可以幫助你轉換成瀏覽器可以運行的穩定的版本，因為各大瀏覽器對es6+的支持并不都很好。
且從babel6以及更高版本，babel自身不負責轉換工作，具體的轉換工作由插件來實現，babel只提供babel-core來把JavaScript代碼分析為AST（抽象語法樹），供插件做轉換。

如何使用babel

通用的方式是在項目中寫 .babelrc文件，或者在package.json中配置"babel"選項（圖二react腳手架就是這么做的）

plugins、presets、transform-runtime、stage-X、env和babel-polyfill

先 npm install babel-core --save-d
寫一個這樣的例子

let a = "a";
let assign = Object.assign({name: "jack"}, {name: "bob"});
let f = () => {
  console.log("arrow func");
}
let i = [].includes;
let p = new Promise();
var q = async function q() {
  console.log("async");
};

這是一段典型的es6語法的代碼，為了將它轉換為es5代碼，我們需要使用插件來轉換。

可以看到這有許多的插件供選擇，只需要挑選合適的插件即可，
.babelrc文件配置如下：

{
  "plugins": [
    "some plugin",
    "some plugin",
    ...
  ]
}

但是如果需要很多很多插件的話，一個一個寫是很費力的
所以，presets可以拯救我們，presets可以理解為plugin的集合
繼續配置.babelrc文件：

{
  "presets": [
    "es2015",
  ],
  "plugins": [
  ]
}

編譯完的結果為

可以看到只轉換了let、箭頭函數這樣的語法，assign、includes、Promise、async被原樣輸出
這個時候就需要transform-runtime了

{
  "presets": [
    "es2015"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

編譯完的結果為：

可以看到let、箭頭函數、Object.assign、Promise都被正確編譯，但是async、includes依然沒有變化
此時可以引入stage-X的概念了，Stage-x preset 中的任何轉換都是對未被批準為 JavaScript 版本一部分的語言的變化，大白話就是還未被發布的版本中的語法，比如現在JavaScript的最新規范版本的es6，所以es7的一些語法我們就需要引入stage-X來使用，比如async這樣的語法。
不成熟的想法(stage-0:Strawman)——>通過之后變成提議(stage-1:Proposal)——>通過進入草案(stage-2: Draft）——>通過進入候選(stage-3: Candidate)——>進入標準(stage-4:finished)可以看到這里面有個層層篩選的過程，所以stage-0包含的功能最多，要是不知道哪個階段的功能，直接stage-0
至于stage-0、stage-1、stage-2、stage-3分別具體的使用，看文檔babel-stage
繼續配置.babelrc

{
  "presets": [
    "es2015"
    "stage-0"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

編譯結果：

圖雖然沒截全，但是可以看到async方法被轉換過來了，然而includes方法依然沒有轉換。
此時就要使用babel-polyfill了，babel-polyfill會仿效一個完整的 ES2015+ 環境，這意味著你可以使用新的內置對象比如 Promise 或者 WeakMap, 靜態方法比如 Array.from 或者Object.assign, 實例方法比如 Array.prototype.includes 和生成器函數。簡言之，babel-polyfill就像lodash這種庫一樣，引入之后可以隨心所欲的使用es6+的方法。
使用方法：

import "babel-polyfill"

或

module.exports = {
    entry: ["babel-polyfill", "./index.js"]
};

最后，env是什么意思呢？它是environment的縮寫，根據你支持的環境自動決定適合你的 Babel 插件的 Babel presets，其實就是根據你的環境來自動決定插件集合。

總結

plugin：真正做轉換工作的，寫在plugins數組中，實現一些語法的轉換
presets：一組插件
stage-X：轉換一些還未正式發布的語法，例如async
presets-env：根據你支持的環境自動決定適合你的 Babel 插件的 Babel presets
transform-runtime：轉換一些對象以及方法，例如Promise、Set，并且它動態提供你所使用的插件，且不會強行的修改全局對象的prototype，但是runtime不會轉換實例方法，只會轉換靜態方法。最后，寫工具庫的時候考慮使用transform-runtime，不會沖突
babel-polyfill：這是一個庫，安裝的時候我們需要讓它成為一個 dependency, 而不是一個 devDependency，且它直接在全局對象上擴展，可以很自由的使用es6+，可以轉換實例方法和靜態方法，使用它可以取代transform-runtime和presets。但是它的問題是體積較大回帶來許多我們并用不到的東西以及可能會帶來沖突，需要兼容平臺和環境較多時考慮使用

參考：
https://juejin.im/entry/5a290...
https://github.com/youngwind/...
https://segmentfault.com/a/11...

GPU云服務器云服務器我所知道你不知道的我所你不知道的javascript

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

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

【譯】使用TypeScript兩年后-值得嗎？

摘要：弄了一個持續更新的筆記，可以去看看，鏈接地址此篇文章的地址使用兩年后值得嗎基礎筆記的地址可以也可以。使用，你可以使用抽象類等功能。有關抽象類的更多信息支持，和方法，只讀屬性。弄了一個持續更新的github筆記，可以去看看，鏈接地址：Front-End-Basics 此篇文章的地址：使用TypeScript兩年后-值得嗎？基礎筆記的github地址：https://githu...

RyanQ 2019-08-23 16:56 評論0 收藏0
Vue 2.x 實戰之后臺管理系統開發（一）

摘要：導語下文實戰之后臺管理系統開發二該文章將從頭到尾梳理我是如何使用開發一個后臺管理項目的，我會將自己遇到的問題貼出，希望可以幫助到其他人。構建項目框架準備對于大陸用戶，建議將的注冊表源設置為國內的鏡像，如淘寶鏡像，可以大幅提升安裝速度。 1. 導語下文：Vue 2.x 實戰之后臺管理系統開發（二）該文章將從頭到尾梳理我是如何使用 Vue 2 開發一個后臺管理項目的，我會將自己遇到的問...

darkbaby123 2019-08-20 16:49 評論0 收藏0
我所理解的簡單的項目結構

摘要：將圖片都放入文件夾下指定公共的名字。匹配刪除的文件根目錄開啟在控制臺輸出信息啟用刪除文件插入開關說一些可能沒用的站在前端角度不懂的很多很多時候一個項目都是由一個小組完成的，小組成員可能包括產品，前端，后端，測試，運營等等。不急，先聽我嘮會嗑~ 隨著js發展的如此迅速，市場上越來越多的前端框架可以方便開發者使用。本人大四渣渣一名，先后實習了兩個地方，第一家公司用vuejs，實話...

_DangJin 2019-08-22 16:17 評論0 收藏0
查漏補缺 - 收藏集 - 掘金

摘要：醞釀許久之后，筆者準備接下來撰寫前端面試題系列文章，內容涵蓋瀏覽器框架分鐘搞定常用基礎知識前端掘金基礎智商劃重點在實際開發中，已經非常普及了。這道題--致敬各位10年阿里的前端開發 - 掘金很巧合，我在認識了兩位同是10年工作經驗的阿里前端開發小伙伴，不但要向前輩學習，我有時候還會選擇另一種方法逗逗他們，拿了網上一道經典面試題，可能我連去阿里面試的機會都沒有，但是我感受到了一次面試1...

YuboonaZhang 2019-08-29 12:56 評論0 收藏0
利用vscode調試nodejs代碼實踐總結

摘要：支持，和三種環境，并且可以安裝擴展插件，因而可以滿足絕大多數人的要求，安裝配置非本文所要講述的內容，請自行查找，本文著重討論如何用更好的調試代碼，希望能對大家有所幫助。 2018.5.12更新最近在用vscode 1.23版本的時候發現outDir不可以使用了，建議這么改吧，直接program采用編譯后的文件，然后打開sourceMaps，同時在babel編譯的時候自己搞--watc...

chenatu 2019-08-21 17:42 評論0 收藏0