编程知识 cdmana.com

A brief introduction to various JavaScript parsers

author : sea

Various js Parser is the cornerstone of front-end engineering , It can be said that without it , A lot of Engineering doesn't work properly , We use it every day babel、webpack、eslint、TypeScript We all need a set of corresponding js Parser , Today we'll look at it , What parsers are commonly used in the market at present , What characteristics do they have ?


Say js Before parser , We need to know something about ESTree This project , The original intention of this project is through the power of the community , Guarantee and es Consistency of specifications , To express through a custom grammatical structure JavaScript Of AST, Later, with the increasing popularity , With the participation of many well-known Engineers , It has become a de facto norm , The current library is Mozilla Maintained with the community .

without AST standard , That means that you can't create a parser at all , And if the AST Disunity of norms , Some of the corresponding tool libraries can't communicate with each other well , such as webpack It can't be used normally babel Related to the plug-in .

Precisely because EsTree The specification of the definition of , So now all the js Parser or compiler , It's basically impossible to get around it , If you want to write one yourself js Parser , Then you must read the document again .

One . Well-known JS Parser

1.1 uglify-js (11.2k*)

Creation time :2010-8-1
Work address :https://github.com/mishoo/UglifyJS
The authors introduce :Mihai Bazon,Lisp The programmer ,Emacs lovers , It looks like Romanian
The author blog :

Used to obfuscate and compress code , For some reason ,uglify-js own [ Internally, a set of AST standard [1]](http://lisperator.net/blog/ug..., It's because of its AST It's self-made , It's not standard ESTree,es6 After the new grammar AST, Don't support , So there's no way to compress the latest es6 Code for , If you need to compress , Similar to babel This tool is converted into ES5.

uglify-js It's been done to 3 Version of the , The first two versions are Mihai Bazon maintain , But now the latest 3 The version is alexlamsluglify-js It's been done to 3 Version of the , The first two versions are

uglify-js Can pass --acorn perhaps --spidermonkey Specify corresponding parsing

1.2 Esprima (6k*)

Creation time :2011-11-20
Work address :https://github.com/jquery/esprima
The authors introduce :ariya Indonesians , Got a doctorate in Germany , Currently living in Silicon Valley mountain view , Created the world's first truly headless Web browser PhantomJS. Also for the WebKit, KDE, and Qt Contributed a lot of code
The author blog :

This is a The first one uses JavaScript Written in line with EsTree canonical JavaScript The parser , Many subsequent compilers are affected by it , I think its emergence has historical significance .

1.3 acorn (6.8k*)

Creation time :2012-9-23
Work address :https://github.com/acornjs/acorn
The authors introduce :Marijn Haverbeke, It's also a rich text editor prosemirror(4.8k)、 Browser code editor CodeMirror(21.7k) The author of , He also published a Book 《Eloquent JavaScript》, And this book is also available online https://eloquentjavascript.net/, At present, the book has been translated in China , But only the second edition 《JavaScript Programming insight 》, There are also people who currently live in Berlin, Germany .
The author blog :

acorn and Esprima Is very similar , Output ast It's all in line with EsTree canonical , at present webpack Of AST The parser uses acorn, and Esprima equally , It also doesn't directly support JSX

It should be mentioned that ,[acorn Of es6 Grammar support RReverser Contributed more than half of [2]](https://rreverser.com/added-e...

1.4 @babel/parser(babylon)

Creation time :2012-9-23
Work address :https://github.com/babel/babel/tree/master/packages/babel-parser

babel Official parser , first fork On acorn, Later, he completely went his own way , from babylon After the change of name , The plug-in system it builds is very powerful .

1.5 espree (1.3k*)

Creation time :2014-11-30
Work address :https://github.com/eslint/espree
author :Nicholas C. Zakas, Multiple copies js Books , among 《 Red Treasure Book The third edition 》 Most famous ,eslint He also created , stay 2016 He was diagnosed with Lyme disease in , I haven't worked for a long time now , If you're interested , You can go to github It donated him , Donation page links .
The author blog :

eslint、prettier Default parser for , first fork On Esprima A branch of (v1.2.2), Later, because ES6 Rapid development of , but Esprima I don't support it for a short time , It's based on acorn Developed .

1.5 TypeScript

Creation time :2014-7-6
Work address :https://github.com/microsoft/TypeScript/tree/master/src/compiler
author : This is microsoft Of Anders Hejlsberg Leaders created , He is also C#、Delphi、Turbo Pascal The author of

Now there are a lot of big projects , The first choice is TypeScript, Its parser is in the project src/compiler/parser.ts,TypeScript There's one big difference from other projects , It's about

The above Library , It's all based on js To write it , There are also libraries , There are also some special js Parser , If you need to know something about

Two . Other interesting parsers

2.1 sucrase (2.9k*)

Creation time :2017-9-24
Work address :https://github.com/alangpierce/sucrase
author :Alan Pierce, Inauguration benchling, This is a company that specializes in software collaboration for life scientists .
The author blog :

This is a @babel/parser A subset of , If you're sure the code doesn't need to be compatible IE browser , You can use this parser , According to his introduction , Its parsing speed should be the fastest at present .

2.2 swc (10.1k*)

Creation time :2017-12-17
Work address :https://github.com/swc-project/swc
author :강동윤, He is a 97 Xiaomengxin in , I'm still a sophomore ,rust A big fan of , Open source a lot rust Related items , So this year 8 month Deno The official gave him a consultancy contract .
The author blog :

With rust Compiling js compiler , Single core ratio babel fast 4 times ,4 Nuclear ratio babel fast 70 times , It can also be used to pack js、ts Code , And also have tree shaking function , Its default configuration file spack.config.js and webpack.config.js bring into correspondence with ,@swc/cli Intentionally and @babel/cli Want to share , It seems ambitious .

Its goal is to replace babel, Now it's done babel Most of the functions ,[ See the comparison table for details [3]](https://swc.rs/docs/compariso...

2.3 esbuild (16.5k*)

Creation time :2020-1-1
Work address :https://github.com/evanw/esbuild/
author :Evan Wallace, Have been engaged in webGL Aspect related development , Currently working in Figma
Personal blog :

esbuild Yes, it is go The next generation of Writers web Packaging tools , It has the fastest packaging and compression records available ,snowpack and vite It's also used as a packaging tool , In pursuit of outstanding performance , At present, there is no plan to AST Exposure , It can't be modified AST, Cannot be used to resolve the corresponding JavaScript.

At present, its star The fastest growing of all projects .

3、 ... and . Other well-known toolkits

3.1 recast (3.4k*)

Creation time :2012-9-16
Work address :https://github.com/benjamn/recast
author :Ben Newman,recast author ,TC39 member , Currently living in the Brooklyn area of New York
Personal blog :

If you need to refactor your code , So this library will be your first choice , It can use multiple parsers at the same time , And you can customize the parser you need to pass in , It's a good tool for reconstruction .

3.2 jscodeshift (5.9k*)

Creation time :2015-3-22
Work address :https://github.com/facebook/jscodeshift
author :Felix Kling.
Personal blog :

jscodeshift The bottom layer depends on recast, On the basis of it, we encapsulate traversal 、 operation AST Methods , Make it more convenient , If you need to do it directly AST To build new features , I think this is the most appropriate choice .

For the moment fkling Has left Facebook, At present, the main maintainer of this library is no longer him

3.2 ASTExplorer (3.6k*)

Creation time :2014-6-29
Work address :https://github.com/fkling/astexplorer
author :Felix Kling

If you need to refactor or refactor the code AST Analysis of , that https://astexplorer.net/ This website should be able to help you , It's a visual AST Browsing tools , excellent .

Not yet SWC, But someone has already mentioned the corresponding pr, Not yet merged


Yes Electron Interested in ? Please pay attention to our open source projects Electron Playground, It's going to take you very fast Electron.

We will select some interesting articles and news to share with you every Friday , Come to the Nuggets and focus on our Xiaoqianfeng weekly .

We are the future · Xiao blackboard front-end technical team .
We will often share with you the latest and coolest technical knowledge of the industry .
Welcome You know Nuggets SegmentfaultCSDN Simple books Open source in China Blog Garden Pay attention to our .


Scroll to Top