作者：滄海
各種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愛好者，貌似是羅馬尼亞人
作者博客：
- https://github.com/mishoo
- http://lisperator.net/
**
用于混淆和壓縮代碼，因為一些原因，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貢獻過很多代碼
作者博客：
- https://ariya.io/about
- https://github.com/ariya
這是第一個用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編程精解》，也有人目前居住在德國柏林，
作者博客：
- https://marijnhaverbeke.nl/
- https://github.com/marijnh
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上面捐贈他，捐贈頁面鏈接，
作者博客：
- https://github.com/nzakas
- https://humanwhocodes.com/
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
作者：這個是microsoft的Anders 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，這是一家專門給生命科學家提供軟體協作的公司，
作者博客：
- https://github.com/alangpierce
這是@babel/parser的一個子集，如果你確定的代碼不需要兼容IE瀏覽器，就可以用這個決議器，按照他的介紹，其決議速度目前來說應該是最快的，
2.2 swc (10.1k☆)
創作時間：2017-12-17
作品地址：https://github.com/swc-project/swc
作者：???，他是一個97年的小萌新，目前還在讀大二，rust的狂熱愛好者，開源了很多rust相關的專案，為此今年8月份Deno官方給了他一份顧問合同，
作者博客：
- https://github.com/kdy1
- 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]
2.3 esbuild (16.5k☆)
創作時間：2020-1-1
作品地址：https://github.com/evanw/esbuild/
作者：Evan Wallace，一直從事webGL方面的相關的開發，目前就職于Figma
個人博客：
- https://github.com/evanw
- http://madebyevan.com/
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成員，目前居住于紐約布魯克林地區
個人博客：
- https://github.com/benjamn
- https://www.quora.com/profile/Ben-Newman
如果你需要重構你的代碼，那么這個庫將會是你的第一選擇，它可以同時使用多種決議器，并且可以自定義傳入需要的決議器，是重構利器，
3.2 jscodeshift (5.9k☆)
創作時間：2015-3-22
作品地址：https://github.com/facebook/jscodeshift
作者：Felix Kling，
個人博客：
- https://github.com/fkling
- https://felix-kling.de/
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，還沒有合并
參考文獻
- 1. uglify-js為什么用SpiderMonkey AST
- 2. RReverser為acorn貢獻了大部分es6規范實作
- 3. swc完成的babel功能對照圖
對 Electron 感興趣？請關注我們的開源專案 Electron Playground，帶你極速上手 Electron，
我們每周五會精選一些有意思的文章和訊息和大家分享，來掘金關注我們的 曉前端周刊，
我們是好未來 · 曉黑板前端技術團隊，
我們會經常與大家分享最新最酷的行業技術知識，
歡迎來 知乎、掘金、Segmentfault、CSDN、簡書、開源中國、博客園 關注我們，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/240413.html
標籤：HTML5