You don’t know, Babel
What comes to mind when you think of Babel?
- You can convert your es6, ES7, and other code from your project into code supported by your target environment
- You can automatically polyfill apis that are not supported by the target environment
- Taro (Small Program Translation Tool) is based on Babel
- Babel is rich in plugins
- Our company now compiles typescript with Babel instead of TSC
- I made the function of automatic burial point based on Babel, which was praised by the leader
- .
Babel can do more than that. It can do three kinds of things:
Translate js supported by esNext, typescript, Flow, etc
This is the most commonly used feature to translate esnext’s new syntax, typescript’s, and Flow’s syntax in your code into an implementation based on the syntax supported by the target environment. You can also polyfill apis that are not supported by the target environment.
Babel7 supports preset-env. Targets can be specified for on-demand conversion. The conversion is more accurate and the output is smaller.
Some specific purpose code conversion
Babel is a translator that exposes apis that can be used to parse code to the AST, convert the AST, and generate object code.
Developers can use it to perform specific purpose transformations such as function piling (automatically inserting code into a function such as buried point code), automatic internationalization, default import to named import, etc.
Taro, a popular small program translation tool, is based on Babel’s API.
Static analysis of the code
Once parsed, the code can be transformed because it is understood through the structure of the AST. After understanding the code, in addition to making the transformation and then generating the object code, the information can also be used to analyze the code and perform some checks.
What else can Babel do?
Babel is an essential tool for front-end business development and toolchain development. We use it every day, but have you ever thought about these questions:
- How to write a Babel plug-in to do custom code conversion?
- Where can you automate business development with Babel?
- How is Babel implemented?
There are
- How is linter implemented?
- How is typescript type checking implemented?
- How does the compression obfuscate tool work?
- How does the packaging tool analyze code dependencies?
- How is API documentation generated automatically?
You can do all of these things with Babel, and you may not have thought that Babel has so much power. Learning Babel will definitely take you up a notch.
Complete tool chain based on Babel
Let’s take a look at how these tools are implemented (all of the tools listed below have their implementation code on Github)
Automatic internationalization
Internationalization is a way of replacing written string literals with values from a resource bundle. Babel can parse a string literal in the code, replace it with a function call statement, and then automatically import the resource bundle. With Babel, we can do automatic internationalization.
Automatically generate API documentation
When we write an API, we will add comments at the top, so can we extract the comments and the associated function and class information, and use a certain template to generate API documents? Yes, Babel can do that.
linter
We use esLint and stylelint all day for code specification checks, but they’re just checking the AST, which we can do with Babel. You can implement ESLint based on Babel.
type checker
Typescript adds static type information to code, allows type checking at compile time, and AIDS in intelligent hints of code, and is now a front-end prerequisite. But have you ever wondered how typescript works? In the brochure we’ll write a TS Type Checker to give you a real understanding of typescript!
Compression confusion
We use it all day long, but do you know how it works? Can we use Babel to do it? The answer is yes, and in the booklet we will implement the ability to compress obfuscation.
Js interpreter
How the V8 engine is implemented, and how interpreted languages interpret code. Can we implement a JS interpreter? Yes, we can. In the Babel Plugin Tutorial we will implement a JS interpreter based on Babel Parser.
Handwritten Babel
You might ask, all of this is based on Babel, but what if there were no Babel?
We will implement a Babel without Babel, and at the end of the booklet we will implement a simple but usable Babel that will allow you to really understand how Babel works and really master Babel.
The above interpreter and type check content, wang Yin sell 12000, see below, so this small volume is definitely worth.
The outline
It says a lot about the volume, and here’s a full list of the volume:
Not only the Babel
Although the above actual combat is based on Babel, but you learn only Babel?
No, the example above involves a complete toolchain, from document generation, Lint, Type check, compression confusion, to js interpreters, and so on. It’s almost a closed loop of front-end development. Taking this as a starting point, what you learn is the realization of the whole tool chain.
The above tools are still concentrated in the front end of the field, but the translator, interpreter implementation idea is universal, compiler principle is mainly to learn the compiler, translator, interpreter three parts, learn complete this small book, I believe also can help you get started compiling principle.
conclusion
Babel is an almost must-have tool for the front end, and you can do a lot of things with it, even the whole toolchain. We’ll implement linter, Type Cheker, compression obfuscations, automatic GENERATION of API documentation, JS interpreters, and more in the volume. The interpreter and type-checking function can be sold for 12,000 yuan by Wang Yin, which makes the contents and price of this brochure very reasonable.
If the Babel API is a technique, then the compilation principles and toolchain implementation ideas based on Babel are tao. Mastery of Babel, mastery of the tool chain, and introduction to the principles of compilation will definitely take you up a notch.
Brochure link: sourl.co/v3Wygf