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 ?

Preface

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], 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]

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]

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

reference


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 .

Here's a brief introduction to JavaScript More articles on parser

  1. python Module introduction - HTMLParser ordinary HTML and XHTML Parser

    python Module introduction - HTMLParser ordinary HTML and XHTML Parser 2013-09-11 Magnetite # Undertake software automation implementation and training gtalk:ouyangchongwu#gmail.comqq ...

  2. JS-YAML -YAML 1.2 JavaScript Parser / Writer

    download JS-YAML -YAML 1.2 JavaScript Parser / Writer JS-YAML -YAML 1.2 JavaScript Parser / Writer The online demo This is a YAML The implementation of the ,YAML It's kind of friendly to people ...

  3. javascript Parser principle

    Browser reading HTML When you file , Only when you meet <script> When labeling , Will wake up the so-called “JavaScript Parser ” start-up . JavaScript How the parser works 1. “ Find something ”: v ...

  4. Browser “JavaScript Parser ” working principle

    Browser reading HTML When you file , Only when you meet <script> When labeling , Will wake up the so-called “JavaScript Parser ” start-up . JavaScript How the parser works : 1.“ Find something ”: v ...

  5. SSD disk ,CPU stay in a high position without going down , High concurrency , Is it right? mysql The parser costs cpu High resources ?

    Look at the experiments I did , This user Table is 300 many W Record , Under ordinary disk , The most time consuming is Copy to tmp table 0.81 second , Of course. ssd Next , This can reduce a lot of , The second highest is sending data ...

  6. springmvc View parser under configuration development

    Multiple view parser priorities :

  7. Recently, we have used Git, Let's briefly introduce the specific usage

    pull: It's a drop-down code , This is equivalent to downloading remote code to your local location , Merge with your local code push: It's push code , Upload your code to the remote action, the complete process is : The first method :( Simple and easy to understand ) 1.git add .( There's a point in the back , It means ...

  8. How to do it in spring Use in RabbitMQ

    This article mainly introduces how to understand in spring Use in RabbitMQ, In this paper, the example code is introduced in detail , It has certain reference learning value for everyone's study or work , Friends in need can refer to Common message middleware products : (1)Ac ...

  9. cJSON: One use c Write a simple and easy to use JSON Parser

    from :http://blog.csdn.net/chenzhongjing/article/details/9188347 Download address : http://sourceforge.net/projects/ ...

  10. Brief introduction to Java String Split 【 A brief introduction Java String Split】

    Split is a common function in Java. It split a full string to an array based on delimeter. For examp ...

Random recommendation

  1. SourceTree Installation tutorial and GitLab Configuration details

    One . install Git link : http://pan.baidu.com/s/1mh7rICK password : 48dj Two . install SourceTree link : http://pan.baidu.com/s/1skWk ...

  2. Linux Course practice 2 : The compiler module implements kernel data manipulation

    One . Kernel module principle 1. Linux The kernel adds functionality Linux The overall structure of the kernel is huge , It contains a lot of components , Now there are two ways to incorporate the required functionality into the kernel : - Static loading : Compile all functions into Linux kernel . - dynamic ...

  3. git Skills record -- Submodule deletion method

    Push the sub module forward , Delete it ( Delete the submodule , Then submit the push ), Delete submodule step : 1. stay Platform.Web Under the library , Right click ->Git Bash, Get into git Command line window , Input :git rm –-cached ...

  4. CentOS6.4 Kernel optimization

    vi /etc/sysctl.conf net.ipv4.tcp_syncookies = net.ipv4.tcp_tw_reuse = net.ipv4.tcp_tw_recycle = net. ...

  5. 【Unity3D Game development 】 Custom New C# The header description of the file ( Three three )

    unity When you add a new script , Can be customized [ Developer name ][ Development date ][ File description ][ Copyright notice ] etc. , I don't know who wrote it , There's no description , The key is TNND There's not even a man who carries the pot Actually unity We have been provided with a new script ...

  6. jQuery Judge that all images are loaded

    Processing of pictures , For example, slide shows . Zoom, etc , It all depends on the completion of all the images before the operation . Today, let's see how to judge whether all the pictures are loaded , And before loading is complete, you can use loading Of gif The graph shows that loading is in progress . One . universal ...

  7. 24 Learn when you are young Linux The process of the kernel

    It's a good theme , Even I feel a little too big myself , But I think I have to stick to it , Try to learn in limited time Linux The secret of the kernel , I hope you can give us more advice , Let me be more progressive . It's all about the process today , This confused me when I was a sophomore , It turned out that ...

  8. js Registration, login, audit

    <script type="text/javascript"> $(function(){ $("#sendSms").click(function ...

  9. About android:screenOrientation=&quot;portrait&quot; etc.

    1.android:screenOrientation="portrait", When switching between horizontal and vertical screens , Always display in vertical screen , It doesn't display content according to the direction of the screen . 2. Insert a Andr ...

  10. js Generate images from web content

    $(function () { $("#saveimg_btn").on("click",function (event) { event.preventDef ...