你好，babel

写在前面

其实学babel是本人2019年Q3的一个计划，因为当时自己做的一个项目需要自己去配babel，也遇到了一些困难，发现自己对babel的了解还是很少的，所以决定好好看下babel；可是后来解决了当时的问题后，由于业务需求很多再加上自己懒了(这才是最终的原因)，学习babel的事也就不了了之了。。。拖到了现在0.0

已经进入2020年了，还没有来得及总结自己的19年，但是2020年我要立下一个早该做到的flag，今年的Q1本人要彻底搞懂babel，也不说彻底搞懂啦，最起码本人要做到团队所有的babel问题我都可以直接解决。

其实我也不是为了搞懂babel而想着去学，我最近也看了一些关于babel的博客，慢慢的发现babel其实很有意思，去研究一个东西对自己的技术成长也会有提升，话不多说学就完了，奥利给！

对babel的基本理解

其实在学babel之前我也做了一些功课，对babel也有一些基本的理解，我先基本的谈谈我对最基本的理解

babel是什么？

babel就是一个转换器，它可以把高阶ES2015+版本的代码转换成浏览器可以解析的代码(向后兼容)。

为什么要用babel？

本人是做前端的，主要就是在用js，js版本也是一年比一年在更新，每次更新都会出一些更方便好用的方法，到现在ECMAScript已经到了ES10了，已经迭代了10个版本；不过现在多数浏览器支持的主流js语言是ES2014语法，有很多对ES2015以及ES2015+的一些语法是不支持的，也就是你用这些语法有部分浏览器是不支持的，就会报错。

但是高阶语法就是很方便啊，我就是想用，怎么办？这个时候为什么要用babel就很明显了，就是用它来把ES2015+的语法编译成浏览器能识别的通用语言，举个最简单的例子：

// babel编译前，ES2015箭头函数
(n) => { return n + 1 }
// babel编译后，ES2014函数
function (n) { return n + 1 }

babel如何工作的？

看了一些关于babel的博客，我觉得babel就是一个插件集合，里面有一个个的插件。

babel将代码解析成AST(抽象语法树)，然后用一个个对应的插件修改AST，将修改好的AST输出。

babel的一些其他的特性

babel默认是只会去转义js语法的，不会去转换新的API，比如像Promise、Generator、Symbol这种全局API对象，babel是不会去编译的；

这个时候就需要使用babel的babel-polyfill或者babel-runtime库 和 babel-plugins-transform-runtime插件结合使用按需添加polyfill。

写在最后

本人现在学习一门技术的步骤(以这次学习babel为例)：

1. 先看关于babel的博客文章，对babel有个基本的认知；
2. 列下babel学习目录思维导图；
3. 对着自己列的思维导图把babel文档过一遍；
4. 去了解babel究竟是如何把高阶语法编译成浏览器能识别的语法的。

---

我对自己学一门技术的步骤有点疑问，总感觉这样去学效率不高，总感觉哪里有点不对，但我也说不上来哪点不对，如果谁有建议什么的还望提给我，抱拳了

---

在最后列下我自己学习babel的目录脑图，我将开启我的babel学习之旅。

2020年，加油！