本文首發(fā)于 vivo互聯(lián)網(wǎng)技術(shù) 微信公眾號(hào) 
鏈接：  https://mp.weixin.qq.com/s/plJewhUd0xDXh4Ce4CGpHg
作者：Morrain

成都創(chuàng)新互聯(lián)專注于企業(yè)營(yíng)銷型網(wǎng)站建設(shè)、網(wǎng)站重做改版、麒麟網(wǎng)站定制設(shè)計(jì)、自適應(yīng)品牌網(wǎng)站建設(shè)、H5高端網(wǎng)站建設(shè)、商城網(wǎng)站建設(shè)、集團(tuán)公司官網(wǎng)建設(shè)、成都外貿(mào)網(wǎng)站制作、高端網(wǎng)站制作、響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)等建站業(yè)務(wù)，價(jià)格優(yōu)惠性價(jià)比高，為麒麟等各大城市提供網(wǎng)站開(kāi)發(fā)制作服務(wù)。

一、前言

在上一節(jié) 《 CommonJS：不是前端卻革命了前端》中，我們聊到了 ES6 Module，它是 ES6 中對(duì)模塊的規(guī)范，ES6 是 ECMAScript 6.0 的簡(jiǎn)稱，泛指 JavaScript 語(yǔ)言的下一代標(biāo)準(zhǔn)，它的第一個(gè)版本 ES2015 已經(jīng)在 2015 年 6 月正式發(fā)布，本文中提到的 ES6 包括 ES2015、ES2016、ES2017等等。在第一節(jié)的《Web：一路前行一路忘川》中也提到過(guò)，ES2015 從制定到發(fā)布?xì)v經(jīng)了十幾年，引入了很多的新特性以及新的機(jī)制，瀏覽器對(duì) ES6 的支持進(jìn)度遠(yuǎn)遠(yuǎn)趕不上前端開(kāi)發(fā)小哥哥們使用 ES6 的熱情，于是矛盾就日益顯著……

二、Babel 是什么

先來(lái)看下它在 官網(wǎng)上的定義：

Babel is a JavaScript compiler

沒(méi)錯(cuò)就一句話，Babel 是 JavaScript 的編譯器。至于什么是編譯器，可以參考  the-super-tiny-compiler 這個(gè)項(xiàng)目，可以找到很好的答案。

本文是以 Babel 7.9.0 版本進(jìn)行演示和講解的，另外建議學(xué)習(xí)者閱讀英文官網(wǎng)，中文官網(wǎng)會(huì)比原版網(wǎng)站慢一個(gè)版本，并且很多依然是英文的。

Babel 就是一套解決方案，用來(lái)把 ES6 的代碼轉(zhuǎn)化為瀏覽器或者其它環(huán)境支持的代碼。 注意我的用詞哈，我說(shuō)的不是轉(zhuǎn)化為 ES5 ，因?yàn)椴煌愋鸵约安煌姹镜臑g覽器對(duì) ES6 新特性的支持程度都不一樣，對(duì)于瀏覽器已經(jīng)支持的部分，Babel 可以不轉(zhuǎn)化，所以 Babel 會(huì)依賴瀏覽器的版本，后面會(huì)講到。這里可以先參考  browerslist 項(xiàng)目。

Babel 的歷史

在學(xué)習(xí)任何一門(mén)知識(shí)前，我都習(xí)慣先了解它的歷史，這樣才能深刻理解它存在意義。

Babel 的作者是 FaceBook 的工程師 Sebastian McKenzie。他在 2014 年發(fā)布了一款 JavaScript 的編譯器 6to5。從名字就能看出來(lái)，它主要的作用就是將 ES6 轉(zhuǎn)化為 ES5。

這里的 ES6 指 ES2015，因?yàn)楫?dāng)時(shí)還沒(méi)有正式發(fā)布， ES2015 的名字還未被正式確定。

于是很多人評(píng)價(jià)，6to5 只是 ES6 得到支持前的一個(gè)過(guò)渡方案，它的作者非常不同意這個(gè)觀點(diǎn)，認(rèn)為 6to5 不光會(huì)按照標(biāo)準(zhǔn)逐步完善，依然具備非常大的潛力反過(guò)來(lái)影響并推進(jìn)標(biāo)準(zhǔn)的制定。正因?yàn)槿绱?6to5 的團(tuán)隊(duì)覺(jué)得 '6to5' 這個(gè)名字并沒(méi)有準(zhǔn)確的傳達(dá)這個(gè)項(xiàng)目的目標(biāo)。加上 ES6 正式發(fā)布后，被命名為 ES2015，對(duì)于 6to5 來(lái)說(shuō)更偏離了它的初衷。于是 2015 年 2 月 15 號(hào)，6to5 正式更名為 Babel。

（圖片來(lái)源于網(wǎng)絡(luò)）

Babel 是巴比倫文化里的通天塔，用來(lái)給 6to5 這個(gè)項(xiàng)目命名真得太貼切了！羨慕這些牛逼的人，不光代碼寫(xiě)得好，還這么有文化，不像我們，起個(gè)變量名都得憋上半天，吃了沒(méi)有文化的虧。這也是為什么我把這篇文章起名為 《Babel：把 ES6 送上天的通天塔》的原因。

三、Babel 怎么用

了解了 Babel 是什么后，很明顯我們就要開(kāi)始考慮怎么使用 Babel 來(lái)轉(zhuǎn)化 ES6 的代碼了，除了 Babel 本身提供的 cli 等工具外，它還支持和其它打包工具配合使用，譬如 webpack、rollup 等等，可以參考 官網(wǎng)對(duì)不同平臺(tái)提供的配置說(shuō)明。

本文為了感受 Babel 最原始的用法，不結(jié)合其它任何工具，直接使用 Babel 的 cli 來(lái)演示。

1、構(gòu)建 Babel 演示的工程

使用如下命令構(gòu)建一個(gè) npm 包，并新建 src 目錄 和 一個(gè) index.js 文件。

npm init -y

package.json 內(nèi)容如下：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

2、安裝依賴包

npm install --save-dev @babel/core @babel/cli @babel/preset-env

后面會(huì)介紹這些包的作用，先看用法

增加 babel 命令來(lái)編譯 src 目錄下的文件到 dist 目錄：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "src/index.js",
  "scripts": {
    "babel": "babel src --out-dir dist",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.8.4",
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.0"
  }
}

3、增加 Babel 配置文件

在工程的根目錄添加 babel.config.js 文件，增加 Babel 編譯的配置，沒(méi)有配置是不進(jìn)行編譯的。

const presets = [
  [
    '@babel/env',
    {
      debug: true
    }
  ]
]
const plugins = []
 
module.exports = { presets, plugins }

上例中 debug 配置是為了打印出 Babel 工作時(shí)的日志，可以方便的看來(lái)，Babel 轉(zhuǎn)化了哪些語(yǔ)法。

1. presets 主要是配置用來(lái)編譯的預(yù)置，plugins 主要是配置完成編譯的插件，具體的含義后面會(huì)講

2. 推薦用 Javascript 文件來(lái)寫(xiě)配置文件，而不是 JSON 文件，這樣可以根據(jù)環(huán)境來(lái)動(dòng)態(tài)配置需要使用的 presets 和 plugins

const presets = [
  [
    '@babel/env',
    {
      debug: true
    }
  ]
]
const plugins = []
 
if (process.env["ENV"] === "prod") {
  plugins.push(...)
}
 
module.exports = { presets, plugins }

本文標(biāo)題：前端科普系列（4）：Babel——把ES6送上天的通天塔-創(chuàng)新互聯(lián)
文章地址：http://aaarwkj.com/article48/ccdghp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站策劃、全網(wǎng)營(yíng)銷推廣、外貿(mào)網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、網(wǎng)站內(nèi)鏈、網(wǎng)站排名

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)