![]() import "core-js" īabel's can automatically import the required plug-ins according to the configuration of the targets, and introduce the required core-js modules. If you want to do compatibility processing, you need to import core-js (implementation of polyfill) at the entrance. The code generated by tsc is not processed by polyfill. In terms of supported syntax features, babel has more. ![]() So if you only use standard syntax, you can use tsc or babel, but if you want to use some draft-phase syntax, tsc may not support many, but babel can introduce plugin to support it. For the syntax that is still in the draft stage, the plugin needs to be introduced separately to support it. ![]() If you want to support the new syntax, you need to upgrade the version of tsc.īabel uses to automatically introduce the required plugins according to the configuration of the target environment targets to support the standard syntax. It looks like this, but there is a difference between how babel and tsc implement these functions: Difference between babel and tscĪside from type checking and generating d.ts, the two functions that babel does not support, let's take a look at the comparison of other functions:Ĭompare the syntax support and code generation respectively: Syntax supportīy default, tsc supports the syntax of the latest es specification and some syntaxes that are still in the draft stage (such as decorators). Just because there is no type information, no d.ts will be generated.Ĭomparing the compilation process of the two, you will find that babel can do everything that tsc can do, except that babel does not do type checking and generate type declaration files. The generator does the generation of target code and sourcemap, corresponding to the emitter of tsc. It's just that babel doesn't do type checking, no checker. The transform stage does semantic analysis and code conversion, corresponding to the binder and transformer of tsc. The parser corresponds to the scanner and parser of tsc, both of which do lexical analysis and syntax analysis, but babel does not subdivide. In fact, comparing the compilation process of tsc, the difference is not big: If you want to see tokens, you need to open the settings and enable tokens:Īnd babel also has a playground (babel's called repl), you can directly see the code generated after compilation: The source code undergoes lexical analysis and syntax analysis by parser to generate token and ast.Īst will do semantic analysis to generate scope information, and then call transformer to convert ast.įinally, generator will be used to print ast into object code and generate sourcemap.īabel's ast and token can also be viewed visually with : The compilation process of babel is as follows: The generated object code, d.ts and error messages can also be viewed directly with ts playground:Īfter roughly understanding the compilation process of tsc, let's take a look at babel's: Compilation process of babel The ast generated by tsc can be viewed visually with : The function of sourcemap is to map the code location of the source code and the target code, so that the breakpoint can be located to the corresponding source code during debugging, and the location of the source code error can also be located according to the sourcemap when an online error is reported. If there is a transformer plugin (tsc supports custom transform), it will be called after the checker, and various additions, deletions and changes can be made to ast.Īfter the type check is passed, the ast will be printed as the object code with the emitter, and the type declaration file d.ts will be generated, as well as the sourcemap. If there is a type error, it is reported at the checker stage. Then do semantic analysis, including scope analysis with binder, and type checking with checker. Then use parser for parsing, and assemble into an abstract syntax tree (abstract syntax tree) ast. The source code must first be lexically analyzed with scanner, and divided into words that cannot be subdivided, called tokens. The compilation process of the typescript compiler is as follows: Let's take a look at them separately: Compilation process of tsc Needless to say, it must be the compiler that comes with ts.īut in fact, babel can also compile ts code, so what is the difference between using babel and tsc to compile ts code? What compiler do you use to compile typescript code?
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |