你好,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学习之旅。
image

2020年,加油!

猜你喜欢

转载自www.cnblogs.com/bai1218/p/12152647.html