阅读文章之前，不妨打开手头项目中的 package.json ，我们会发现众多工具已经占据了我们开发日常的各个角落，例如 JavaScript 转译、CSS 预处理、代码压缩、ESLint、Prett

我们在日常开发中经常用到async await去请求接口，解决异步。可async await语法的缺点就是若await后的Promise抛出错误不能捕获，整段代码区就会卡住。从而使下面的逻辑不能顺利执行。也许会有人说，卡住就是为了不进行后续的代码，以免造成更大的错误，可大多数情…

需要读到入口文件里面的内容。 分析入口文件，递归的去读取模块所依赖的文件内容，生成AST语法树。 我们创建了add.js文件和minus.js文件,然后 在index.js中引入，再将index.js文件引入index.html。 现在我们打开index.html。你猜会发生什…

Babel 是 JavaScript 编译器 compiler，更确切地说是源码到源码的编译器，通常也叫做 转换编译器（transpiler）。 意思是说你为 Babel 提供一些 JavaScript 代码，Babel 更改这些代码，然后返回给你新生成的代码。 Babylon…

✨满满的干货，不容错过哦. 写文不易，点赞是最大的鼓励。 文章下篇已经更新：深入浅出 Babel 下篇：既生 Plugin 何生 Macros 有点冷清，赞起来。 上图是 Babel 的处理流程, 如果读者学习过编译器原理，这个过程就相当亲切了. 1️⃣词法解析(Lexical…

遂卒.... 开玩笑的，既然提到了，又没回答上来什么，哎哟我这暴脾气，一想到今晚就睡不着，连夜把它撸了。 那么我们来从零写个插件吧。 你会发现Babel解析成表达式里面再嵌套表达式。 到这里，已经向你大概的讲解了，如何编写一个Babel插件，再也不怕面试官问我答不出什么了哈..…

经过之前的三篇文章介绍，AST的CRUD都已经完成。下面主要通过vue转小程序过程中需要用到的部分关键技术来实战。 注意:，跟我们之前介绍的一致，为了完成上述转换，要把输入和输出均放入AST explorer，查看其先后的结构对比。 将所有的this.[data member]…

抽象语法树（AST），是一个非常基础而重要的知识点，但国内的文档却几乎一片空白。 本文将带大家从底层了解AST,并且通过发布一个小型前端工具，来带大家了解AST的强大功能 Javascript就像一台精妙运作的机器，我们可以用它来完成一切天马行空的构思。 我们对javascri…

babel的过程：解析——转换——生成。 比如我们在读一句话的时候，我们也会做分词操作，比如：“今天天气真好”，我们会把他切割成“今天”，“天气”，“真好”。 那换成js的解析器呢,我们看一下下面一个语句console.log(1);,js会看成console,.,log,(,…