A brief introduction to various JavaScript parsers

Time:2021-4-19

Author:sea

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?

preface

Before talking about JS parser, we need to understand it firstESTreeThe original intention of this project is to ensure the consistency with the ES specification through the power of the community, and express the ast of JavaScript through a custom syntax structure. Later, with the increasing popularity and the participation of many well-known engineers, it has become a de facto specification. At present, this library is maintained by Mozilla and the community together.

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☆)

Creation time: August 1, 2010
Address:https://github.com/mishoo/UglifyJS
Author’s introduction:Mihai Bazon, LISP programmer, Emacs enthusiast, seems to be Romanian
Author’s blog:

**
Used to obfuscate and compress code,For some reasons, uglify JS itselfThe internal implementation of a set of AST specifications [1]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
Address:https://github.com/jquery/esprima
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
Author’s blog:

This isThe first JavaScript parser written in JavaScript that conforms to the estree specificationMany subsequent compilers are influenced by it. I think its emergence has historical significance.

1.3 acorn (6.8k☆)

Creation time: September 23, 2012
Address:https://github.com/acornjs/acorn
Author’s introduction:Marijn Haverbeke, which is also a rich text editorprosemirror(4.8k), browser code editorCodeMirror(21.7k), and he also published a Book eloquent JavaScript, which is also available onlinehttps://eloquentjavascript.net/At present, the book has been translated in China, but only in the second editionJavaScript programmingThere are also people currently living in Berlin, Germany.
Author’s blog:

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 [2]

1.4 @babel/parser(babylon)

Creation time: September 23, 2012
Address:https://github.com/babel/babel/tree/master/packages/babel-parser

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
Address:https://github.com/eslint/espree
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
Author’s blog:

The default parsers of eslint and prettier, originally fork inEsprimaBecause of the rapid development of ES6, butEsprimaIt doesn’t support it in a short time, so it is developed based on acorn.

1.5 TypeScript

Creation time: July 6, 2014
Address:https://github.com/microsoft/TypeScript/tree/master/src/compiler
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
Address:https://github.com/alangpierce/sucrase
Author:Alan Pierce, working inbenchling, a company that specializes in software collaboration for life scientists.
Author’s blog:

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
Address:https://github.com/swc-project/swc
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.
Author’s blog:

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 [3] for details

2.3 esbuild (16.5k☆)

Creation time: January 1, 2020
Address:https://github.com/evanw/esbuild/
Author:Evan Wallace, has been engaged in webgl related development, currently working in figma
Personal blog:

Esbuild is the next generation of web packaging tool written in go. It has the fastest packaging record and compression record at present. It is also used by snowpack and vite as a packaging tool. In order to pursue excellent performance, AST has not been exposed, nor can it be modified, nor can it be used to parse the corresponding JavaScript.

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
Address:https://github.com/benjamn/recast
Author: Ben Newman, author of recast, member of TC39, currently living in Brooklyn, New York
Personal blog:

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
Address:https://github.com/facebook/jscodeshift
Author: Felix Kling.
Personal blog:

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
Address:https://github.com/fkling/astexplorer
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

reference


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.
WelcomeZhihuNuggetsSegmentfaultCSDNBrief bookOpen source ChinaBlog GardenFocus on us.