All kinds of JS parsers are the cornerstone of front-end engineering. It can be said that without it, many engineering can not be executed normally. Behind the Babel, webpack, eslint and typescript that we use every day, we need a set of corresponding JS parsers. Today, let’s take a look at the common parsers in the market and what features do they have?
If there is no ast specification, it means that it is impossible to build the corresponding parser at all. If the ast specification is not unified, some corresponding tool libraries will not be able to communicate with each other. For example, webpack will not be able to use Babel related plug-ins normally.
It is precisely because of the specification of the definition of estree that all JS parsers or compilers can’t do without it. If you are interested in writing a JS parser yourself, you must read its documents.
One. Famous JS parser
1.1 uglify-js (11.2k☆)
Used to obfuscate and compress code,For some reasons, uglify JS itselfThe internal implementation of a set of AST specifications It is also because its AST is self created, not a standard estree. The ast with new syntax after ES6 is not supported, so there is no way to compress the latest ES6 code. If you need to compress, you can use tools like Babel to convert it to Es5 first.
Uglify JS has been in three versions, and the first two versions are bothMihai BazonMaintenance, but now the latest version 3 isalexlamslUglify JS has been in three versions, and the first two versions are both
Uglify JS can specify the corresponding parsing by — acorn or — SpiderMonkey
1.2 Esprima (6k☆)
Creation time: November 20, 2011
Ariya, an Indonesian, who has a doctorate in Germany, now lives in mountain view of Silicon Valley and has created the world’s first real headless web browserPhantomJS. Also forWebKit, KDE, andQtContributed a lot of code
1.3 acorn (6.8k☆)
Creation time: September 23, 2012
Acorn and esprima are very similar. The output ast conforms to the estree specification. At present, webpack’s ast parser uses acorn, which, like esprima, does not directly support JSX
What needs to be mentioned is,Acorn’s ES6 syntax supports rreverer, which contributes most 
Creation time: September 23, 2012
Babel’s official parser, initially fork in acorn, later completely went its own way. After changing its name from Babylon, it built a very powerful plug-in system.
1.5 espree (1.3k☆)
Creation time: November 30, 2014
Author:Nicholas C. Zakas, many JS books, among which the third edition of Hongbao book is the most famous. Eslint was also founded by him. He was found to have Lyme disease in 2016. Now he has not worked for a long time. If you are interested, you can donate him to GitHub,Donation page link。
Creation time: July 6, 2014
Author: This ismicrosoftOfAnders HejlsbergHe is also the author of C, Delphi and turbo Pascal
Now many large projects, the first choice is typescript, its parser is in the project Src / compiler/ parser.ts One of the biggest differences between typescript and other projects is that
The above libraries, in essence, are based on JS. There are also some libraries and some special JS parsers. You can learn about them if you need
Two. Other interesting parsers
2.1 sucrase (2.9k☆)
Creation time: September 24, 2017
Author:Alan Pierce, working inbenchling, a company that specializes in software collaboration for life scientists.
This is a subset of @ Babel / parser. If you decide that the code does not need to be compatible with 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: December 17, 2017
Author:강동윤He is a little cute new in 1997, and he is still a sophomore. He is a big fan of rust and has opened many projects related to it. For this reason, in August this year, DeNO officially gave him a consulting contract.
JS compiler written in trust, single core is 4 times faster than Babel, 4-core is 70 times faster than Babel, it can also be used to package JS and TS code, and it also has tree shaping function, its default configuration file spack.config.js and webpack.config.js Keeping in line, @ SWC / cli deliberately wants to be the same as @ Babel / cli, which seems to be very ambitious.
Its goal is to replace Babel. At present, it has completed most of the functions of Babel,See table  for details
2.3 esbuild (16.5k☆)
At present, its star is the fastest growing of all projects.
Three. Other famous tool Libraries
3.1 recast (3.4k☆)
Creation time: September 16, 2012
Author: Ben Newman, author of recast, member of TC39, currently living in Brooklyn, New York
If you need to refactor your code, this library will be your first choice. It can use multiple parsers at the same time, and you can customize the parsers you need. It is a powerful tool for refactoring.
3.2 jscodeshift (5.9k☆)
Creation time: March 22, 2015
Author: Felix Kling.
The underlying layer of jscodeshift relies on recast, which encapsulates the method of traversing and operating ast, making it more convenient. If you need to directly operate AST to build new functions, I think this is the most appropriate choice.
For now, fkling has left Facebook, and the main maintainer of the library is no longer him
3.2 ASTExplorer (3.6k☆)
Creation time: June 29, 2014
Author: Felix Kling
If you need to refactor the code or do ast analysis, thenhttps://astexplorer.net/This website should help you a lot. It’s a visual ast browsing tool. It’s great.
At present, SWC is not supported, but the corresponding PR has been proposed and has not been merged
- 1. Why does uglify JS use SpiderMonkey ast
- 2. Rreverer contributed most of the ES6 specification implementation for acorn
- 3. Comparison chart of Babel function completed by SWC
Interested in electron? Please pay attention to our open source projectsElectron PlaygroundTo get you started, electron.
Every Friday, we will select some interesting articles and news to share with you, to nuggets to pay attention to our workXiaoqian weekly。
We are the front-end technical team of tal.
We will often share with you the latest and coolest technical knowledge of the industry.
WelcomeZhihu、Nuggets、Segmentfault、CSDN、Brief book、Open source China、Blog GardenFocus on us.