作者：[滄海](https://juejin.cn/user/3438928103484558) 各種js解析器是前端工程化的基石，可以說如果沒有它，很多工程化都無法正常執行，我們每天用到的babel、webpack、eslint、TypeScript背後都需要一套對應的js解析器，今天我們來看看，目前市場上有哪些常用的解析器，他們各自又擁有什麼特性尼？ ## 前言 在說js解析器前，我們需要先了解下[ESTree](https://github.com/estree/estree)這個專案，這個專案的初衷通過社群的力量，保證和es規範的一致性，通過自定義的語法結構來表述JavaScript的AST，後來隨著知名度越來越高，多位知名工程師的參與，使得變成了事實意義上的規範，目前這個庫是Mozilla和社群一起維護的。 如果沒有AST規範，那麼也就意味著根本無法造出對應的解析器，而如果AST規範不統一，一些相應的工具庫就不能很好的互通有無，比如webpack就無法正常的使用babel相關外掛。 正是因為EsTree的定義的規範，所以現在所有的js解析器或者編譯器，基本上都繞不開它，如果你有志於自己寫一個js解析器，那它的文件你一定需要讀一遍。 ## 一。知名的JS解析器 ### 1.1 [uglify-js](https://github.com/mishoo/UglifyJS) (11.2k☆) 創作時間：2010-8-1 作品地址：[https://github.com/mishoo/UglifyJS](https://github.com/mishoo/UglifyJS) 作者介紹：[Mihai Bazon](http://lisperator.net/)，Lisp程式設計師，Emacs愛好者，貌似是羅馬尼亞人 作者部落格： - [https://github.com/mishoo](https://github.com/mishoo) - [http://lisperator.net/](http://lisperator.net/) ** **用於混淆和壓縮程式碼，**因為一些原因，uglify-js自己[內部實現了一套AST規範[1]](http://lisperator.net/blog/uglifyjs-why-not-switching-to-spidermonkey-ast/)，也正是因為它的AST是自創的，不是標準的ESTree，es6以後新語法的AST，都不支援，所以沒有辦法壓縮最新的es6的程式碼，如果需要壓縮，可以用類似babel這樣的工具先轉換成ES5。 uglify-js已經進行到3版本了，前兩個版本都是[Mihai Bazon](http://lisperator.net/)維護，但現在最新的3版本是[alexlamsl](https://github.com/alexlamsl)uglify-js已經進行到3版本了，前兩個版本都是 > uglify-js可以通過--acorn或者--spidermonkey指定對應的parsing ### 1.2 [Esprima](http://esprima.org/) (6k☆) 創作時間：2011-11-20 作品地址：[https://github.com/jquery/esprima](https://github.com/jquery/esprima) 作者介紹：ariya印尼人，在德國獲得博士學位，目前住在矽谷山景城，建立了世界上第一個真正的無頭Web瀏覽器[PhantomJS](http://phantomjs.org/)。也為[WebKit](http://webkit.org/blog/370/ariya-hidayat-is-a-webkit-reviewer), [KDE](https://behindkde.org/ariya-hidayat), 和 [Qt](http://blog.qt.io/blog/author/ariya/)貢獻過很多程式碼 作者部落格： - [https://ariya.io/about](https://ariya.io/about) - [https://github.com/ariya](https://github.com/ariya) 這是**第一個用JavaScript編寫的符合EsTree規範的JavaScript的解析器**，後續多個編譯器都是受它的影響，個人覺得它的出現具有歷史意義。 ### 1.3 [acorn](https://github.com/acornjs/acorn) (6.8k☆) 創作時間：2012-9-23 作品地址：[https://github.com/acornjs/acorn](https://github.com/acornjs/acorn) 作者介紹：[Marijn Haverbeke](https://github.com/marijnh)，同時也是富文字編輯器[prosemirror](https://github.com/ProseMirror/prosemirror)（4.8k）、瀏覽器程式碼編輯器[CodeMirror](https://github.com/codemirror/CodeMirror)（21.7k）的作者，另外他還出版了一本書《Eloquent JavaScript》，並且這本書在網上也有[https://eloquentjavascript.net/](https://eloquentjavascript.net/)，目前國內也翻譯了這本書，不過只有第二版[《JavaScript程式設計精解》](https://book.douban.com/subject/19933548/)，也有人目前居住在德國柏林。 作者部落格： - [https://marijnhaverbeke.nl/](https://marijnhaverbeke.nl/) - [https://github.com/marijnh](https://github.com/marijnh) acorn和Esprima很類似，輸出的ast都是符合EsTree規範的，目前webpack的AST解析器用的就是acorn，和Esprima一樣，也是也不直接支援JSX 需要提一下的是，[acorn的es6語法支援RReverser貢獻了大半[2]](https://rreverser.com/added-es6-support-to-acorn/) ### 1.4 [@babel/parser(babylon)](https://github.com/babel/babel/tree/master/packages/babel-parser) 創作時間：2012-9-23 作品地址：[https://github.com/babel/babel/tree/master/packages/babel-parser](https://github.com/babel/babel/tree/master/packages/babel-parser) babel官方的解析器，最初fork於acorn，後來完全走向了自己的道路，從babylon改名之後，其構建的外掛體系非常強大。 ### 1.5 [espree](https://github.com/eslint/espree) (1.3k☆) 創作時間：2014-11-30 作品地址：[https://github.com/eslint/espree](https://github.com/eslint/espree) 作者：[Nicholas C. Zakas](https://github.com/nzakas)，多本js書籍，其中《紅寶書 第三版》最為知名，eslint也是他建立的，在2016年被查出萊姆病，目前已經很長時間沒有工作了，如果有興趣的話，可以去github上面捐贈他，[捐贈頁面連結](https://github.com/sponsors/nzakas)。 作者部落格： - [https://github.com/nzakas](https://github.com/nzakas) - [https://humanwhocodes.com/](https://humanwhocodes.com/) eslint、prettier的預設解析器，最初fork於[Esprima](http://esprima.org/)的一個分支（v1.2.2），後來因為ES6的快速發展，但[Esprima](http://esprima.org/)短時間內又不支援，後面就基於acorn開發了。 ### 1.5 [TypeScript](https://github.com/microsoft/TypeScript) 創作時間：2014-7-6 作品地址：[https://github.com/microsoft/TypeScript/tree/master/src/compiler](https://github.com/microsoft/TypeScript/tree/master/src/compiler) 作者：這個是[microsoft](https://github.com/microsoft/TypeScript)的[Anders Hejlsberg](https://github.com/ahejlsberg)領導建立的，他也是是C#、Delphi、Turbo Pascal的作者 現在很多大型專案，首選就是TypeScript，它的解析器是就在專案內src/compiler/parser.ts，TypeScript和其他專案有一個最大的不同，就在於 以上的庫，本質上都是基於js來寫的，還有一些庫，還有一些特殊的js解析器，如果有需要也可以瞭解下 ### ## 二。其他有意思的解析器 ### 2.1 [sucrase](https://github.com/alangpierce/sucrase) (2.9k☆) 創作時間：2017-9-24 作品地址：[https://github.com/alangpierce/sucrase](https://github.com/alangpierce/sucrase) 作者：[Alan Pierce](https://github.com/alangpierce)，就職於[benchling](https://www.benchling.com/)，這是一家專門給生命科學家提供軟體協作的公司。 作者部落格： - [https://github.com/alangpierce](https://github.com/alangpierce) 這是@babel/parser的一個子集，如果你確定的程式碼不需要相容IE瀏覽器，就可以用這個解析器，按照他的介紹，其解析速度目前來說應該是最快的。 ### 2.2 [swc](https://github.com/swc-project/swc) (10.1k☆) 創作時間：2017-12-17 作品地址：[https://github.com/swc-project/swc](https://github.com/swc-project/swc) 作者：[강동윤](https://github.com/kdy1)，他是一個97年的小萌新，目前還在讀大二，rust的狂熱愛好者，開源了很多rust相關的專案，為此今年8月份Deno官方給了他一份顧問合同。 作者部落格： - [https://github.com/kdy1](https://github.com/kdy1) - [https://kdy1.github.io/](https://kdy1.github.io/) 用的rust編寫的js編譯器，單核比babel快4倍，4核比babel快70倍，也可以用來打包js、ts程式碼，並且也擁有 tree shaking功能，它的預設的配置檔案spack.config.js和webpack.config.js保持一致，@swc/cli故意與@babel/cli想同，看來野心非常大。 它的目標就是替換babel，目前它已經完成了babel的大部分功能，[具體可以看對照表[3]](https://swc.rs/docs/comparison-babel) ### 2.3 [esbuild](https://github.com/evanw/esbuild/) (16.5k☆) 創作時間：2020-1-1 作品地址：[https://github.com/evanw/esbuild/](https://github.com/evanw/esbuild/) 作者：[Evan Wallace](https://github.com/evanw)，一直從事webGL方面的相關的開發，目前就職於Figma 個人部落格： - [https://github.com/evanw](https://github.com/evanw) - [http://madebyevan.com/](http://madebyevan.com/) esbuild是用go編寫的下一代web打包工具，它擁有目前最快的打包記錄和壓縮記錄，snowpack和vite的也是使用它來做打包工具，為了追求卓越的效能，目前沒有將AST進行暴露，也無法修改AST，無法用作解析對應的JavaScript。 > 目前它的star在所有專案中增長最為迅速。 ## 三。其他一些著名的工具庫 ### 3.1 [recast](https://github.com/benjamn/recast) (3.4k☆) 創作時間：2012-9-16 作品地址：[https://github.com/benjamn/recast](https://github.com/benjamn/recast) 作者：Ben Newman，recast作者，TC39成員，目前居住於紐約布魯克林地區 個人部落格： - [https://github.com/benjamn](https://github.com/benjamn) - [https://www.quora.com/profile/Ben-Newman](https://www.quora.com/profile/Ben-Newman) 如果你需要重構你的程式碼，那麼這個庫將會是你的第一選擇，它可以同時使用多種解析器，並且可以自定義傳入需要的解析器，是重構利器。 ### 3.2 [jscodeshift](https://github.com/facebook/jscodeshift) (5.9k☆) 創作時間：2015-3-22 作品地址：[https://github.com/facebook/jscodeshift](https://github.com/facebook/jscodeshift) 作者：Felix Kling。 個人部落格： - [https://github.com/fkling](https://github.com/fkling) - [https://felix-kling.de/](https://felix-kling.de/) jscodeshift底層依賴於recast，在其基礎上封裝了遍歷、操作AST的方法，使得更加便，如果你需要直接操作AST來構建新的功能，我覺得這個是最合適的選擇。 > 目前來說fkling已經離開了Facebook，目前這個庫的主要維護者已經不是他了 ### 3.2 [ASTExplorer](https://github.com/fkling/astexplorer) (3.6k☆) 創作時間：2014-6-29 作品地址：[https://github.com/fkling/astexplorer](https://github.com/fkling/astexplorer) 作者：Felix Kling 如果你需要對程式碼進行重構或者進行AST的分析，那麼[https://astexplorer.net/](https://astexplorer.net/)這個網站應該可以很好的幫助你，它是一個視覺化的AST瀏覽工具，非常棒。 > 目前還不支援SWC，但是已經有人提了對應的pr，還沒有合併 ## 參考文獻 - [1. uglify-js為什麼用SpiderMonkey AST](http://lisperator.net/blog/uglifyjs-why-not-switching-to-spidermonkey-ast/) - [2. RReverser為acorn貢獻了大部分es6規範實現](https://rreverser.com/added-es6-support-to-acorn/) - [3. swc完成的babel功能對照圖](https://swc.rs/docs/comparison-babel) *** > 對 Electron 感興趣？請關注我們的開源專案 [Electron Playground](https://github.com/tal-tech/electron-playground)，帶你極速上手 Electron。 > > 我們每週五會精選一些有意思的文章和訊息和大家分享，來掘金關注我們的 [曉前端週刊](https://juejin.cn/collection/6901099462693748750)。 *** > 我們是好未來 · 曉黑板前端技術團隊。 > 我們會經常與大家分享最新最酷的行業技術知識。 > 歡迎來 [知乎](https://www.zhihu.com/people/xiao-hei-ban-qian-duan-ji-zhu)、[掘金](https://juejin.cn/user/1327865776581463)、[Segmentfault](https://segmentfault.com/u/xiaofe)、[CSDN](https://blog.csdn.net/xiaoheibanfe)、[簡書](https://www.jianshu.com/u/6517d7cd379e)、[開源中國](https://my.oschina.net/u/4876846)、[部落格園](https://www.cnblogs.com/xiaoheibanfe/) 關注