Babel學習系列1-Babel歷史

學習框架/庫的時候，我喜歡把框架/庫的歷史發展弄清楚，而後弄清架構設計，最後看語法，有大版本更新的時候 會去看看做者的 twitter , 這樣我會感受代碼是活的，更容易明白這個框架/庫是解決什麼問題出現的，內心比較踏實

前端的蓬勃發展 得益於 Google的V8引擎(2008年出現), Node.js 的誕生(2009年出現,npm 10年出現); V8引擎把 Javascript 的運行速度提上來了(有興趣的能夠看下 Chrome 第一次出現的時候，你們對網頁加載速度驚歎),有了 Node.js 前端出現了打包,編譯, 變得工程化,前端一會兒從石器時代進入到了工業化時代 這樣才使得使用 Javascript 使用量一直排在第一 ，吊打排名第二的Java 前幾年 你們都吐槽 Javascript 變化的很是快,各類框架/工具 百花齊放；但到 17年後明顯平穩了些。 爲何？由於那會啥也沒有，沒有好用的輪子，沒有好有的框架，沒有標準，你們迫切的經過各類方式來提升開發效率，慢慢的這些問題都解決了，前端發展就平穩了不少。因此從歷史發展的角度看問題,會更清晰。

說到前端編譯,打包就離不開 Babel，Webpack,都是開發的基石，以上裝逼完畢，下面聊聊 Babel

what is Babel

簡單講 Babel 是 Javascript 編譯器 ,將 ES6,ES7 ,ES8 轉換成 瀏覽器都支持 的ES5 語法,並提供一些插件來兼容瀏覽器API的工具。是怎麼實現的勒, Babel 會將源碼轉換 AST(抽象語法樹) 以後，經過便利AST樹，對樹作一些修改，而後再將AST轉成code，即成源碼,通俗講就是整了個容，瀏覽器以爲挺漂亮的,讓代碼在瀏覽器上耍撒

// 這種箭頭函數瀏覽器確定是識別不了的
[1, 2, 3].map((n) => n + 1);

// Babel 轉換了下 啾的一下 就變成了下面的代碼,相似 .Java 轉換成 .Class 字節碼
[1, 2, 3].map(function(n) {
  return n + 1;
});
複製代碼

Babel 的誕生

Babel 的前身是 6to5 這個庫， 6to5的做者 是Facebook 的澳大利亞的工程師 Sebastian McKenzie, 6to5 是 2014 年 發佈的，主要功能是 就是 ES6 轉成 ES5 , 它使用 轉換AST的引擎不是本身寫的 ，fork了 一個更古老的庫 acorn ,在2015年 1月份 6to5 和 Esnext 庫(這個是 Ember cli 用的，Ember也是一個很出名的框架,國內用的人比較少)的團隊決定一塊兒開發 6to5,並更名爲 Babel ,解析引擎更名爲 Babylon ,再後來 Babylon 移入 到 @babel/parser

Babel, Babylon 含義

• Babylon 讀出來是 巴比倫 的意思，指的是巴比倫文明
• Babel 指的是 通天塔，是巴比倫文明裏面的 通天塔

  當時地上的人們都說同一種語言，當人們離開東方以後，他們來到了示拿之地。在那裏，人們千方百計燒磚好讓他們可以造出一座城和一座高聳入雲的塔來傳播本身的名聲，以避免他們分散到世界各地。上帝來到人間後看到了這座城和這座塔，說一羣只說一種語言的人之後便沒有他們作不成的事了；因而上帝將他們的語言打亂，這樣他們就不能聽懂對方說什麼了，還把他們分散到了世界各地，這座城市也中止了修建。這座城市就被稱爲「巴別城」。 -- 《創世記》

真是要感嘆下，Babel 這個名字起的是真好，貼切的很,這些人代碼寫的好不說，還這麼有文化，還讓不讓人活了,每次小編要給個項目取名字，都是抓破腦殼，流下了沒有文化的淚水

Babel 版本

• 2015-02-15，6to5重命名爲babel
• 2015-03-31，babel 5.0發佈
• 2015-10-30，babel 6.0發佈
• 2018-08-27, babel 7.0發佈

Babel 團隊狀態

Sebastian McKenzie 後來參與開發就少了，目前主要是 Henry Zhu,全職維護(看這我的得名字和照片,看起來像個亞裔),收入來源是社區捐贈

Babel 發展歷史簡單的歸納了下，下篇講它的設計，經常使用方法.

參考資料:

• Babel文檔;
• Babel,Babylon維基百科
• 6to5 + EsNext
• Henry Zhu 在 dev.io 上發的貼子
• Henry Zhu github history
• Henry Zhu podcast