EDITORIAL
In fact, I learned babel is a plan of Q3 2019, because at that time to do a project of their own to make their own with babel, also encountered some difficulties, found himself understanding of the babel or very little, so I decided to take a look babel; but later, after the problem was solved, because a lot of business together with their own needs lazy (this is the ultimate reasons), learning babel thing fizzled out. . . Drag now 0.0
Has entered in 2020, and has not had time to summarize his 19 years, but in 2020 I want to set a long overdue to do a flag, this year's Q1 I thoroughly get to know babel, do not say get to know it thoroughly, at least I want to do all of babel team I can directly address the issue.
In fact, I do not think to get to know and to learn babel, I recently read some blog about babel, slowly found babel is very interesting to study a thing about their technology growth will have to upgrade, then do not say school would be finished, Orly to!
Basic understanding of babel
In fact, before school babel I have done some homework on the babel there are some basic understanding, I would like to talk about my understanding of the basic fundamental
What babel that?
babel is a converter that can convert higher-order version of the ES2015 + code into the code browser can resolve the (backwards compatible).
Why use babel?
I was doing front-end, mainly using js, js version is also updated every year, some of the more easy to use method of each update will be out, and now has come to the ECMAScript ES10, and has iterated 10 versions ; but now most browsers support mainstream js language syntax is ES2014, there are a lot of some of the syntax of the ES2015 and ES2015 + does not support, that is, you use some of these syntax browser is not supported, it will error.
But the higher-order syntax is very convenient ah, I just want to use, how to do? Why use this time babel is quite clear, is to use it to the ES2015 + syntax compiled into a common language browser can recognize, cite a simple example:
// babel编译前，ES2015箭头函数
(n) => { return n + 1 }
// babel编译后，ES2014函数
function (n) { return n + 1 }How babel work?
Read some blog about babel, I think babel is a plug-in collection, which has a number of plug-ins.
babel将代码解析成AST(抽象语法树)，然后用一个个对应的插件修改AST，将修改好的AST输出。Some other features of babel
babel default is only to escape js syntax, not to convert the new API, such as Promise, Generator, Symbol this global API object, babel is not going to compile;
这个时候就需要使用babel的babel-polyfill或者babel-runtime库 和 babel-plugins-transform-runtime插件结合使用按需添加polyfill。Written in the last
I am now learning a technique in three steps (to learn the babel example):
- Look at the article on the blog of babel, babel to have a basic knowledge;
- Column in the babel learning catalog mind map;
- Front row of their own mind map document through the babel again;
- Babel to understand exactly how the high-order grammar compiled into the browser can recognize grammar.
I was a little doubt on the steps of their own to learn a skill, learn to always feel so efficiency is not high, always feel where a bit wrong, but I can not tell what point does, If anybody has suggestions of what I hope to also mention, the Baoquan
In the last column to learn my own mind map directory babel, babel I will open my learning journey.
2020, come!