【工具向】我所知道的babel總結(jié)

Leo_chen 發(fā)布于2019-08-22 16:32 / 1994人閱讀

摘要：這兩天研究了一下這個(gè)工具，因?yàn)槠綍r(shí)項(xiàng)目基本都是腳手架生成的配置文件，真正自己想寫(xiě)點(diǎn)東西的時(shí)候，親自去配卻是一臉懵逼，寫(xiě)下這篇博客記錄一下我的認(rèn)知范圍內(nèi)的總結(jié)。

這兩天研究了一下babel這個(gè)工具，因?yàn)槠綍r(shí)項(xiàng)目基本都是腳手架生成的babel配置文件，真正自己想寫(xiě)點(diǎn)東西的時(shí)候，親自去配卻是一臉懵逼，寫(xiě)下這篇博客記錄一下我的認(rèn)知范圍內(nèi)的babel總結(jié)。
首先，先看幾個(gè)平時(shí)常見(jiàn)的babel配置

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

babel-core

首先什么是babel？
官網(wǎng)的介紹是：Use next generation JavaScript, today.
簡(jiǎn)單的說(shuō)，就是讓你可以在此時(shí)此刻此地使用下一代JavaScript語(yǔ)法和API，babel可以幫助你轉(zhuǎn)換成瀏覽器可以運(yùn)行的穩(wěn)定的版本，因?yàn)楦鞔鬄g覽器對(duì)es6+的支持并不都很好。
且從babel6以及更高版本，babel自身不負(fù)責(zé)轉(zhuǎn)換工作，具體的轉(zhuǎn)換工作由插件來(lái)實(shí)現(xiàn)，babel只提供babel-core來(lái)把JavaScript代碼分析為AST（抽象語(yǔ)法樹(shù)），供插件做轉(zhuǎn)換。

如何使用babel

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

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

先 npm install babel-core --save-d
寫(xiě)一個(gè)這樣的例子

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語(yǔ)法的代碼，為了將它轉(zhuǎn)換為es5代碼，我們需要使用插件來(lái)轉(zhuǎn)換。

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

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

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

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

編譯完的結(jié)果為

可以看到只轉(zhuǎn)換了let、箭頭函數(shù)這樣的語(yǔ)法，assign、includes、Promise、async被原樣輸出
這個(gè)時(shí)候就需要transform-runtime了

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

編譯完的結(jié)果為：

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

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

編譯結(jié)果：

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

import "babel-polyfill"

或

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

最后，env是什么意思呢？它是environment的縮寫(xiě)，根據(jù)你支持的環(huán)境自動(dòng)決定適合你的 Babel 插件的 Babel presets，其實(shí)就是根據(jù)你的環(huán)境來(lái)自動(dòng)決定插件集合。

總結(jié)

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

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

云服務(wù)器 GPU云服務(wù)器我所知道你不知道的我所你不知道的javascript

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/94434.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

Leo_chen

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

#11.11# 華納云：全場(chǎng)3折起，美國(guó)/香港云服務(wù)器 5M CN2低至24元/月，物理服務(wù)器終身

閱讀 3066·2021-10-27 14:15
阿里云，輕量云服務(wù)器，60元/年，2核/2G/5M帶寬/60GB ESSD/1T流量

閱讀 3064·2021-09-07 10:18
黑科技：CSS定制多行省略

閱讀 1370·2019-08-30 15:53
對(duì)象的解構(gòu)賦值

閱讀 1634·2019-08-26 18:18
javascript表格的一些便捷操作

閱讀 3425·2019-08-26 12:15
首屏渲染優(yōu)化策略

閱讀 3509·2019-08-26 10:43
輪播圖js

閱讀 699·2019-08-23 16:43
webpack4 高手之路第三天

閱讀 2255·2019-08-23 15:27

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【工具向】我所知道的babel總結(jié)

相關(guān)文章

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

Vue 2.x 實(shí)戰(zhàn)之后臺(tái)管理系統(tǒng)開(kāi)發(fā)（一）

我所理解的簡(jiǎn)單的項(xiàng)目結(jié)構(gòu)

查漏補(bǔ)缺 - 收藏集 - 掘金

利用vscode調(diào)試nodejs代碼實(shí)踐總結(jié)

發(fā)表評(píng)論

0條評(píng)論

Leo_chen

男|高級(jí)講師

TA的文章

#11.11# 華納云：全場(chǎng)3折起，美國(guó)/香港云服務(wù)器 5M CN2低至24元/月，物理服務(wù)器終身

阿里云，輕量云服務(wù)器，60元/年，2核/2G/5M帶寬/60GB ESSD/1T流量

黑科技：CSS定制多行省略

對(duì)象的解構(gòu)賦值

javascript表格的一些便捷操作

首屏渲染優(yōu)化策略

輪播圖js

webpack4 高手之路第三天

最新活動(dòng)

資訊專欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

【工具向】我所知道的babel總結(jié)

相關(guān)文章

發(fā)表評(píng)論

0條評(píng)論

男|高級(jí)講師

TA的文章

最新活動(dòng)

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！