手写babel插件-第一讲

终于可以写babel系列的文章了。芜湖~~

到目前为止,我编程道路上的每个阶段都有主动去接触babel,每个阶段也都有不一样的感受。大学的时候,babel与webpack傻傻分不清;工作一年的时候,清醒的知道了babel的作用以及它是怎么运转的。工作2年的时候,很想着去写一些babel插件,于是看了几遍官网、也看了很多文章,结果发现自己还是不会写。这个时候再看其他文章就看不进去了,同时再回过头来看前几个月的状态,也好像能够总结出几点看不进去的原因:

  • 自己的理解能力、学习能力确实是有限且不足的,这点要接受事实。
  • 内心不坚定。现在的网络这么发达,我们所从事的行业,它的相关内容,90%都可以在网络上搜索到,由于每个人学习的能力不同,侧重点不一样,学习方式也不同,所以你看其他人的文章,有可能会出现看不懂的现象,一正一反的鲜明对比,你的内心就会怕,你越怕,你就越不可能达到自己内心所期待的高度。
  • 有些文章的质量确实低,并且care不到细节,这反而会消耗自己。
  • 毕业工作以后,外界耗时并且分心的事情确实不少,再加上你知道的越多,不知道的就越多,就导致弹簧压力过大,没办法复原。

那我们如何去破局?走自己的路就好啦,不要跟任何人比,现在不理解,不代表以后不理解。同时呢,我决定写这样的一个专栏,记录一下这个时刻,如果这篇文章能够对其他小伙伴有帮助,那也是荣幸至极。

聊回正题,我们知道babel是一个解析器,作用是将高级语言转换为另一种高级语言。这个过程中,大致分3个步骤,解析 -> 转换 -> 生成。其中,抽象语法树AST是贯穿始终的。因此,想要写一个babel插件,就必然会涉及到AST。这里给大家介绍一个网站,它也是我们今天的主题: AST可视化网站(astexplorer.net/)。

进去以后。界面是这样的:

我们着重来讲解一下,上面这几个tab页签都是干啥用的。

布局介绍

首先网站是左右布局的,左侧源代码,右侧是 源代码根据解析器生成的内容。左侧代码默认是JavaScript(当然你可以选择使用其他语言),右侧的展示形式分为Tree、JSON。想要哪个展现形式,由用户自己决定。

Snippet

支持你新建代码片段,保存代码。

JavaScript(默认的)

支持你切换语言,比如你切换成css,那么它就会将css转换为抽象语法树并返回给用户。

解析器

当你选择了特定的语言后,解析器就会做出相应的改变,因为针对某种语言的解析器有时会有很多,所以这个网站的这个选项,支持你选择不同种类的解析器。比如当你选择了JS语言,那么你就会看到很多的解析器:

Transform

这个选项可以理解为 提供了一个在线写插件的地方。它也有很多的选项,因为能够将JavaScript转换为AST的工具有很多,所以你会看到eslint、babel、jscodeshift等等(因为他们都可以将JS转换为AST),因为我们这篇文章主要讲解的是如何写babel插件,所以这里我们选择babel即可。

选中之后,界面会是这样:

此时整个网站被分为了4个区域:

  • 左上区域是源代码。
  • 右上区域是源代码对应的AST。
  • 左下是可以写babel插件的地方。
  • 右下区域是源代码经过babel处理后的结果。

最后

那咱们第一讲到这里就结束啦,字数也很多啦,那下一篇我们会来讲解,关于AST的一些基本内容,以及如何去手写一个最简单的babel插件,我们下期再见啦,拜拜~~

相关推荐
RainbowSea24 分钟前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴29 分钟前
笨方法学python -练习14
java·前端·python
Mintopia36 分钟前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
慌糖40 分钟前
RabbitMQ:消息队列的轻量级王者
开发语言·javascript·ecmascript
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农1 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
MrSkye1 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤1 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js
爱学习的茄子1 小时前
深入理解JavaScript闭包:从入门到精通的实战指南
前端·javascript·面试
zhanshuo2 小时前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html