本文首發于 vivo互聯網技術 微信公眾號 
鏈接：  https://mp.weixin.qq.com/s/plJewhUd0xDXh4Ce4CGpHg
作者：Morrain

成都創新互聯專注于企業營銷型網站建設、網站重做改版、麒麟網站定制設計、自適應品牌網站建設、H5高端網站建設、商城網站建設、集團公司官網建設、成都外貿網站制作、高端網站制作、響應式網頁設計等建站業務，價格優惠性價比高，為麒麟等各大城市提供網站開發制作服務。

一、前言

在上一節 《 CommonJS：不是前端卻革命了前端》中，我們聊到了 ES6 Module，它是 ES6 中對模塊的規范，ES6 是 ECMAScript 6.0 的簡稱，泛指 JavaScript 語言的下一代標準，它的第一個版本 ES2015 已經在 2015 年 6 月正式發布，本文中提到的 ES6 包括 ES2015、ES2016、ES2017等等。在第一節的《Web：一路前行一路忘川》中也提到過，ES2015 從制定到發布歷經了十幾年，引入了很多的新特性以及新的機制，瀏覽器對 ES6 的支持進度遠遠趕不上前端開發小哥哥們使用 ES6 的熱情，于是矛盾就日益顯著……

二、Babel 是什么

先來看下它在 官網上的定義：

Babel is a JavaScript compiler

沒錯就一句話，Babel 是 JavaScript 的編譯器。至于什么是編譯器，可以參考  the-super-tiny-compiler 這個項目，可以找到很好的答案。

本文是以 Babel 7.9.0 版本進行演示和講解的，另外建議學習者閱讀英文官網，中文官網會比原版網站慢一個版本，并且很多依然是英文的。

Babel 就是一套解決方案，用來把 ES6 的代碼轉化為瀏覽器或者其它環境支持的代碼。 注意我的用詞哈，我說的不是轉化為 ES5 ，因為不同類型以及不同版本的瀏覽器對 ES6 新特性的支持程度都不一樣，對于瀏覽器已經支持的部分，Babel 可以不轉化，所以 Babel 會依賴瀏覽器的版本，后面會講到。這里可以先參考  browerslist 項目。

Babel 的歷史

在學習任何一門知識前，我都習慣先了解它的歷史，這樣才能深刻理解它存在意義。

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

這里的 ES6 指 ES2015，因為當時還沒有正式發布， ES2015 的名字還未被正式確定。

于是很多人評價，6to5 只是 ES6 得到支持前的一個過渡方案，它的作者非常不同意這個觀點，認為 6to5 不光會按照標準逐步完善，依然具備非常大的潛力反過來影響并推進標準的制定。正因為如此 6to5 的團隊覺得 '6to5' 這個名字并沒有準確的傳達這個項目的目標。加上 ES6 正式發布后，被命名為 ES2015，對于 6to5 來說更偏離了它的初衷。于是 2015 年 2 月 15 號，6to5 正式更名為 Babel。

（圖片來源于網絡）

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

三、Babel 怎么用

了解了 Babel 是什么后，很明顯我們就要開始考慮怎么使用 Babel 來轉化 ES6 的代碼了，除了 Babel 本身提供的 cli 等工具外，它還支持和其它打包工具配合使用，譬如 webpack、rollup 等等，可以參考 官網對不同平臺提供的配置說明。

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

1、構建 Babel 演示的工程

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

npm init -y

package.json 內容如下：

{
  "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

后面會介紹這些包的作用，先看用法

增加 babel 命令來編譯 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 編譯的配置，沒有配置是不進行編譯的。

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

上例中 debug 配置是為了打印出 Babel 工作時的日志，可以方便的看來，Babel 轉化了哪些語法。

1. presets 主要是配置用來編譯的預置，plugins 主要是配置完成編譯的插件，具體的含義后面會講

2. 推薦用 Javascript 文件來寫配置文件，而不是 JSON 文件，這樣可以根據環境來動態配置需要使用的 presets 和 plugins

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

本文標題：前端科普系列（4）：Babel——把ES6送上天的通天塔-創新互聯
文章地址：http://www.yijiale78.com/article48/ccdghp.html

成都網站建設公司_創新互聯，為您提供網站策劃、全網營銷推廣、外貿網站建設、網站設計、網站內鏈、網站排名

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯