簡單介紹下各種 JavaScript 解析器

曉前端發表於2020-12-25

作者:滄海

各種js解析器是前端工程化的基石,可以說如果沒有它,很多工程化都無法正常執行,我們每天用到的babel、webpack、eslint、TypeScript背後都需要一套對應的js解析器,今天我們來看看,目前市場上有哪些常用的解析器,他們各自又擁有什麼特性尼?

前言

在說js解析器前,我們需要先了解下ESTree這個專案,這個專案的初衷通過社群的力量,保證和es規範的一致性,通過自定義的語法結構來表述JavaScript的AST,後來隨著知名度越來越高,多位知名工程師的參與,使得變成了事實意義上的規範,目前這個庫是Mozilla和社群一起維護的。

如果沒有AST規範,那麼也就意味著根本無法造出對應的解析器,而如果AST規範不統一,一些相應的工具庫就不能很好的互通有無,比如webpack就無法正常的使用babel相關外掛。

正是因為EsTree的定義的規範,所以現在所有的js解析器或者編譯器,基本上都繞不開它,如果你有志於自己寫一個js解析器,那它的文件你一定需要讀一遍。

一。知名的JS解析器

1.1 uglify-js (11.2k☆)

創作時間:2010-8-1
作品地址:https://github.com/mishoo/UglifyJS
作者介紹:Mihai Bazon,Lisp程式設計師,Emacs愛好者,貌似是羅馬尼亞人
作者部落格:

**
用於混淆和壓縮程式碼,因為一些原因,uglify-js自己內部實現了一套AST規範[1],也正是因為它的AST是自創的,不是標準的ESTree,es6以後新語法的AST,都不支援,所以沒有辦法壓縮最新的es6的程式碼,如果需要壓縮,可以用類似babel這樣的工具先轉換成ES5。

uglify-js已經進行到3版本了,前兩個版本都是Mihai Bazon維護,但現在最新的3版本是alexlamsluglify-js已經進行到3版本了,前兩個版本都是

uglify-js可以通過--acorn或者--spidermonkey指定對應的parsing

1.2 Esprima (6k☆)

創作時間:2011-11-20
作品地址:https://github.com/jquery/esprima
作者介紹:ariya印尼人,在德國獲得博士學位,目前住在矽谷山景城,建立了世界上第一個真正的無頭Web瀏覽器PhantomJS。也為WebKit, KDE, 和 Qt貢獻過很多程式碼
作者部落格:

這是第一個用JavaScript編寫的符合EsTree規範的JavaScript的解析器,後續多個編譯器都是受它的影響,個人覺得它的出現具有歷史意義。

1.3 acorn (6.8k☆)

創作時間:2012-9-23
作品地址:https://github.com/acornjs/acorn
作者介紹:Marijn Haverbeke,同時也是富文字編輯器prosemirror(4.8k)、瀏覽器程式碼編輯器CodeMirror(21.7k)的作者,另外他還出版了一本書《Eloquent JavaScript》,並且這本書在網上也有https://eloquentjavascript.net/,目前國內也翻譯了這本書,不過只有第二版《JavaScript程式設計精解》,也有人目前居住在德國柏林。
作者部落格:

acorn和Esprima很類似,輸出的ast都是符合EsTree規範的,目前webpack的AST解析器用的就是acorn,和Esprima一樣,也是也不直接支援JSX

需要提一下的是,acorn的es6語法支援RReverser貢獻了大半[2]

1.4 @babel/parser(babylon)

創作時間:2012-9-23
作品地址:https://github.com/babel/babel/tree/master/packages/babel-parser

babel官方的解析器,最初fork於acorn,後來完全走向了自己的道路,從babylon改名之後,其構建的外掛體系非常強大。

1.5 espree (1.3k☆)

創作時間:2014-11-30
作品地址:https://github.com/eslint/espree
作者:Nicholas C. Zakas,多本js書籍,其中《紅寶書 第三版》最為知名,eslint也是他建立的,在2016年被查出萊姆病,目前已經很長時間沒有工作了,如果有興趣的話,可以去github上面捐贈他,捐贈頁面連結
作者部落格:

eslint、prettier的預設解析器,最初fork於Esprima的一個分支(v1.2.2),後來因為ES6的快速發展,但Esprima短時間內又不支援,後面就基於acorn開發了。

1.5 TypeScript

創作時間:2014-7-6
作品地址:https://github.com/microsoft/TypeScript/tree/master/src/compiler
作者:這個是microsoftAnders Hejlsberg領導建立的,他也是是C#、Delphi、Turbo Pascal的作者

現在很多大型專案,首選就是TypeScript,它的解析器是就在專案內src/compiler/parser.ts,TypeScript和其他專案有一個最大的不同,就在於

以上的庫,本質上都是基於js來寫的,還有一些庫,還有一些特殊的js解析器,如果有需要也可以瞭解下

二。其他有意思的解析器

2.1 sucrase (2.9k☆)

創作時間:2017-9-24
作品地址:https://github.com/alangpierce/sucrase
作者:Alan Pierce,就職於benchling,這是一家專門給生命科學家提供軟體協作的公司。
作者部落格:

這是@babel/parser的一個子集,如果你確定的程式碼不需要相容IE瀏覽器,就可以用這個解析器,按照他的介紹,其解析速度目前來說應該是最快的。

2.2 swc (10.1k☆)

創作時間:2017-12-17
作品地址:https://github.com/swc-project/swc
作者:강동윤,他是一個97年的小萌新,目前還在讀大二,rust的狂熱愛好者,開源了很多rust相關的專案,為此今年8月份Deno官方給了他一份顧問合同。
作者部落格:

用的rust編寫的js編譯器,單核比babel快4倍,4核比babel快70倍,也可以用來打包js、ts程式碼,並且也擁有 tree shaking功能,它的預設的配置檔案spack.config.js和webpack.config.js保持一致,@swc/cli故意與@babel/cli想同,看來野心非常大。

它的目標就是替換babel,目前它已經完成了babel的大部分功能,具體可以看對照表[3]

2.3 esbuild (16.5k☆)

創作時間:2020-1-1
作品地址:https://github.com/evanw/esbuild/
作者:Evan Wallace,一直從事webGL方面的相關的開發,目前就職於Figma
個人部落格:

esbuild是用go編寫的下一代web打包工具,它擁有目前最快的打包記錄和壓縮記錄,snowpack和vite的也是使用它來做打包工具,為了追求卓越的效能,目前沒有將AST進行暴露,也無法修改AST,無法用作解析對應的JavaScript。

目前它的star在所有專案中增長最為迅速。

三。其他一些著名的工具庫

3.1 recast (3.4k☆)

創作時間:2012-9-16
作品地址:https://github.com/benjamn/recast
作者:Ben Newman,recast作者,TC39成員,目前居住於紐約布魯克林地區
個人部落格:

如果你需要重構你的程式碼,那麼這個庫將會是你的第一選擇,它可以同時使用多種解析器,並且可以自定義傳入需要的解析器,是重構利器。

3.2 jscodeshift (5.9k☆)

創作時間:2015-3-22
作品地址:https://github.com/facebook/jscodeshift
作者:Felix Kling。
個人部落格:

jscodeshift底層依賴於recast,在其基礎上封裝了遍歷、操作AST的方法,使得更加便,如果你需要直接操作AST來構建新的功能,我覺得這個是最合適的選擇。

目前來說fkling已經離開了Facebook,目前這個庫的主要維護者已經不是他了

3.2 ASTExplorer (3.6k☆)

創作時間:2014-6-29
作品地址:https://github.com/fkling/astexplorer
作者:Felix Kling

如果你需要對程式碼進行重構或者進行AST的分析,那麼https://astexplorer.net/這個網站應該可以很好的幫助你,它是一個視覺化的AST瀏覽工具,非常棒。

目前還不支援SWC,但是已經有人提了對應的pr,還沒有合併

參考文獻


對 Electron 感興趣?請關注我們的開源專案 Electron Playground,帶你極速上手 Electron。

我們每週五會精選一些有意思的文章和訊息和大家分享,來掘金關注我們的 曉前端週刊


我們是好未來 · 曉黑板前端技術團隊。
我們會經常與大家分享最新最酷的行業技術知識。
歡迎來 知乎掘金SegmentfaultCSDN簡書開源中國部落格園 關注我們。

相關文章