手写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插件,我们下期再见啦,拜拜~~

相关推荐
zhanshuo27 分钟前
不依赖框架,如何用 JS 实现一个完整的前端路由系统
前端·javascript·html
火柴盒zhang28 分钟前
websheet在线电子表格(spreadsheet)在集团型企业财务报表中的应用
前端·html·报表·合并·spreadsheet·websheet·集团财务
讨厌吃蛋黄酥28 分钟前
智能前端新纪元:语音交互技术与安全实践全解析
javascript
khalil30 分钟前
基于 Vue3实现一款简历生成工具
前端·vue.js
拾光拾趣录37 分钟前
浏览器对队头阻塞问题的深度优化策略
前端·浏览器
用户81221993672237 分钟前
[已完结]后端开发必备高阶技能--自研企业级网关组件(Netty+Nacos+Disruptor)
前端
万少42 分钟前
2025中了 聊一聊程序员为什么都要做自己的产品
前端·harmonyos
1234Wu1 小时前
React Native 接入 eCharts
javascript·react native·react.js
abigale033 小时前
webpack+vite前端构建工具 -11实战中的配置技巧
前端·webpack·node.js
专注API从业者3 小时前
构建淘宝评论监控系统:API 接口开发与实时数据采集教程
大数据·前端·数据库·oracle