Compiling is a concept that seems so far from the front end that even job interviews don’t require knowledge of it.

But is it really far away?

We use Babel and Typescript Compiler for code conversion, Vue Template Compiler for Vue Template parsing, Eslint for static code checking, Terser for code compression. The most important thing is that our JS code runs on the JS engine.

Aren’t these all compilation techniques?

Now, do you still think compilation is far from the front end?

It’s not that compilation techniques aren’t used on the front end, it’s just that they’re used so often that they’re ignored. We’re going to learn some of the tools, but we’re not going to learn the underlying principles.

That’s why I called my first live share, “From Babel into the Principles of Front-end Compilation,” in order to use Babel to show you what compilation technology can do:

You can do things that make sense for the business: automatic burial, automatic internationalization, automatic generation of API documentation

There are tools available: Typescript type checking, compression obfuscations, Linter

You can also implement JS interpreters based on Babel Parser

All of this is happening live.

Live. Juejin. Cn / 4354/481502…

Of course, first of all, start from the basics, to understand the compile process, AST, API, and then all kinds of actual practice. The first half of the broadcast is to lay the groundwork for some of the basics.

After that, we made a conclusion:

Translation, interpretation and compilation are mainly used in the front-end field.

Translation is source to source conversion compilers, such as Babel, Typescript, Terser, etc., which are the most commonly used

Interpretation is the interpretation of the execution of source code, such as various JS engines, including V8, JavascriptCore, Hermes, etc

Compilation refers to the conversion of high-level languages to low-level languages such as bytecode, and the new technology on the front end, WebAssembly, involves compiler knowledge.

Live and in the booklet can be in front of two.

By the end of the broadcast, a large number of students had a clear understanding of what front-end compilation technology could do and how to use Babel.

However, this is not enough, we can not be satisfied with just using, like the title of the Babel Plugin Playlist, just using what is the playlist?

So, we hand-wrote a Babel to help you through the game.

Our next live broadcast will be handwritten Babel.

(The volume will be finished before then.)

If the first installment was a broad expansion of what compilation technology can do, the second installment was a deep expansion of Babel.

For those of you who didn’t watch the first episode, you can watch the replay. If you are interested in Babel, you can join us in the second episode (August 12 at 8pm) and write a Babel!

Compiling, actually, is not far away.