当前位置：首页 > news >正文

Babel进阶：如何自定义插件？

news 来源：原创 2025/7/16 0:27:44

Babel 是一个非常流行的 JavaScript 编译器，下面我们将从零到一编写一个 babel 箭头函数语法转换插件，掌握 babel 插件设计思路与编写规范，需求很简单就是将箭头函数转换为普通函数。

const test = ()=>{console.log("Hello World!") 
}

如上所示，通过 babel 编译后，生成如下代码：

const test = function(){console.log("Hello World!") 
}

1. 自定义插件

1.1. 使用types辅助修改

首先定义箭头函数插件：plugin-arrow-functions.js

const { types: t } = require("@babel/core");module.exports = function () {return {visitor: {ArrowFunctionExpression(path) {// 我当前访问到的箭头函数节点const { node } = path;const body = t.isBlockStatement(node.body)? node.body: t.blockStatement([t.returnStatement(node.body)]);const functionExpression = t.functionExpression(null,node.params,body,node.async);console.log("🚀 ~ ArrowFunctionExpression ~ functionExpression:",functionExpression);// // 假设箭头函数表达式直接返回值，需要特殊处理// if (!t.isBlockStatement(node.body)) {//     functionExpression.body = t.blockStatement([//       t.returnStatement(node.body),//     ]);// }path.replaceWith(functionExpression);}}}
}

通过 types 辅助对象，可以判断当前访问 ast 节点的类型以及对其类型进行加工。

然后在 babel.config.js中定义该插件。

module.exports = {plugins: ["./plugins/arrow-function.js"],
};

最后修改 package.json，添加构建脚本命令。

"scripts": {"build": "babel src -d dist"
}

最后执行pnpm build 执行 babel 编译，在 dist 中输出目标资源，经验证符合要求。

1.2. 使用@babel/helper-plugin-utils

这个方案只是在 visitor 时有所差异，我们可以这样处理：

const { declare } = require("@babel/helper-plugin-utils");
module.exports = declare((api, options) => {const noNewArrows = api.assumption("noNewArrows") ?? options.spec;return {name: "transform-arrow-functions",visitor: {ArrowFunctionExpression(path) {if (!path.isArrowFunctionExpression()) return;path.arrowFunctionToExpression({allowInsertArrow: false,noNewArrows,specCompliant: !noNewArrows,})}}}
})

2. Babel编译过程

Babel 最核心的流程我们可以概括为上图所示，parser => traverse => generator

我们以一个问题来切入：

const a = 1;
let b = 2;
var c = "aiguangyuan";

请将以上代码，转为如下所示 ES5 代码：

var a = 1;
var b = 2;
var c = "aiguangyuan";

2.1. parser

借助@babel/parser将源代码转为 ast 结构，即：

const parser = require('@babel/parser');
const ast = parser.parse(code);

2.2. traverse

借助 @babel/traverse将 ast 进行处理生成新 ast，即：

const traverse = require('@babel/traverse');// 访问者对象
const visitor = {// 遍历声明表达式// 可以直接通过节点的类型操作AST节点。VariableDeclaration(path) {// 替换if (path.node.kind === 'var') {path.node.kind = 'let';}},
};
traverse.default(ast, visitor);

或者：

const traverse = require('@babel/traverse');traverse.default(ast, {enter(path) {if (path.isVariableDeclaration({ kind: 'var' })) {path.node.kind = 'let';}},
});

2.3. generator

借助@babel/generator根据目标 ast 生成目标代码，示例：

const generator = require('@babel/generator');generator.default(ast, {}, code).code;

2.4. 完整过程

const parser = require('@babel/parser');
const traverse = require('@babel/traverse');
const generator = require('@babel/generator');const trans = (code) => {const ast = parser.parse(code);// 访问者对象const visitor = {// 遍历声明表达式// 可以直接通过节点的类型操作AST节点。VariableDeclaration(path) {// 替换if (path.node.kind == 'var') {path.node.kind = 'let';}},};traverse.default(ast, visitor);// 生成代码const newCode = generator.default(ast, {}, code).code;return newCode;
};const code = `const a = 1
let b = 2
var c = 3`;
console.log(trans(code));

Babel进阶：如何自定义插件？

Babel 是一个非常流行的 JavaScript 编译器，下面我们将从零到一编写一个 babel 箭头函数语法转换插件，掌握 babel 插件设计思路与编写规范，需求很简单就是将箭头函数转换为普通函数。 const test ()>{console.log("Hello World!&qu…...

编程日记 2025/7/16 0:27:44

C++中类中const知识应用详解

下面将从**const 成员**、const 成员函数、const 对象、mutable、constexpr 等方面，逐一详解 C 类中常见的 const 用法及注意事项，并配合示例。一、const 数据成员必须在初始化列表中初始化 class A {const int x; // const 成员 public:A(int v) :…...

编程日记 2025/7/15 9:11:12

LeetCode 513 找树左下角的值 LeetCode 112 路径总和 LeetCode106 从中序与后序遍历序列构造二叉树

LeetCode 513 找树左下角的值迭代法——层序遍历思路：对树进行层序遍历操作，层序遍历完后，输出树最后一层的第一个节点。 # Definition for a binary tree node. # class TreeNode(object): # def __init__(self, val0, leftNone, r…...

编程日记 2025/7/5 22:22:16

电脑端实用软件合集：土拨鼠+Rufus+实时网速监控工具

朋友们好，我是李师傅！今天带来三款让人直呼"真香"的电脑工具，它们就像武林高手各怀绝技，保证让你工作效率翻倍！ 1Tuboshu（电脑） 最近发现一款神奇工具——Tuboshu（发音类…...

编程日记 2025/6/29 1:35:56

杨校老师项目之基于SSM与JSP的鲜花销售系统-【成品设计含文档】

基于SSMJSP鲜花商城系统随着电子商务的快速发展，鲜花在线销售已成为一种重要的消费模式。本文设计并实现了一个基于JSP技术的鲜花销售管理系统，采用B/S架构，使用SSM框架进行开发，并结合Maven进行项目依赖管理。系统分为前台用户模…...

编程日记 2025/6/29 1:36:10

#!/bin/bash set -euo pipefail# 基础环境配置 setenforce 0 >/dev/null 2>&1 || true sed -i "s/SELINUXenforcing/SELINUXdisabled/" /etc/selinux/config systemctl stop firewalld >/dev/null 2>&1 || true systemctl disable firewalld >…...

编程日记 2025/6/29 3:55:05

STM32实现循环队列

1. 循环队列的核心结构设计数据结构定义：通常使用结构体封装队列的指针、长度及缓冲区。例如： typedef struct {u16 Head; // 队头指针u16 Tail; // 队尾指针u16 Length; // 当前队列长度u8 Rsv_DAT[50]; // 缓冲区数组 } ringbuff_t; 其中…...

编程日记 2025/6/29 1:41:54

matlab simulink双边反激式变压器锂离子电池均衡系统，双目标均衡策略，仿真模型，提高均衡速度38%

双边反激式变压器锂离子电池均衡系统，双目标均衡策略锂离子电池均衡系统综述引言电池均衡管理系统(Battery Balancing Management System, BBMS)是电池管理系统(BMS)的核心组成部分，主要用于解决电池组中单体电池间的不一致性问题。随着电动汽车、储能…...

编程日记 2025/6/29 1:39:37

数据库笔记(1)

文章目录 1.SQL的通用语法2.四类SQL语句2.1DDL语句2.2.1数据库操作2.1.2表操作 2.2DML语句2.2.1添加数据(INSERT)2.2.2修改数据(UPDATE)2.2.3删除数据(DELETE) 2.3DQL语句2.3.1DQL语法2.3.2基本查询2.3.3条件查询2.3.4分组查询2.3.5排序查询2.3.6分页查询2.3.7DQL语句的执行顺序…...

编程日记 2025/6/29 1:35:49

深入掌握CSS定位：构建精密布局的核心技术

一、定位的定义定位（Positioning）是CSS中用于控制元素在网页中的具体位置的一种机制。通过定位，可以将元素放置在页面的任意位置，并控制其与其他元素的层叠关系。二、定位的特点与作用自由摆放位置： 允许元素摆放…...

编程日记 2025/6/29 4:49:38

使用达梦数据库官方管理工具SQLark导入与导出数据库表

SQLark 是达梦数据官方自主研发的、一款面向信创应用开发者的数据库开发和管理工具。只需简单注册，即可永久免费使用其客户端功能。该工具支持连接达梦、Oracle、MySQL 等多种数据库，为开发者提供了便捷的跨平台操作体验。通过访问官网 www.sqlark.com&a…...

编程日记 2025/6/29 1:36:40

Linux系统管理与编程19：自动部署dns

兰生幽谷，不为莫服而不芳； 君子行义，不为莫知而止休。 #!/bin/bash #----------------------------------------------------------- #前提条件：准备好虚拟机，①外网内网畅通，②yum源搭建好 # File Name: …...

编程日记 2025/6/29 3:16:16

JavaScript高级进阶（七）

this对象想知道this对象是什么，我们先来看一段简单的小代码: <style> div{ width: 200px; height: 200px; background-color: skyblue; } </style> </head> <body> <div…...

编程日记 2025/6/29 1:35:58

前端面试每日三题 - Day 32

这是我为准备前端/全栈开发工程师面试整理的第32天每日三题练习： ✅ 题目1：Electron主流架构模式深度解析核心架构模式对比模式优点缺点适用场景单一窗口模式开发简单、资源占用低功能扩展受限小型工具类应用多窗口模式模块解耦、独立运行进程管理复…...

编程日记 2025/6/29 1:36:03

MySQL全量，增量备份与恢复

目录一.MySQL数据库备份概述 1.数据备份的重要性 2.数据库备份类型 3.常见的备份方法二：数据库完全备份操作 1.物理冷备份与恢复 2.mysqldump 备份与恢复 3.MySQL增量备份与恢复 3.1MySQL增量恢复 3.2MySQL备份案例三：定制企业备份策略思路…...

编程日记 2025/6/29 1:36:04

摆脱拖延症的详细计划示例

以下是一个以一周为周期，帮助你摆脱拖延症的详细计划示例，你可以根据自己的实际情况进行调整和完善。 --- # 摆脱拖延症一周计划 ## 一、计划目标通过一系列有针对性的方法和行动，逐步克服拖延习惯，提高任务执行效率和自我管理…...

编程日记 2025/6/29 3:24:33

Linux512 ssh免密登录 ssh配置回顾

下载MX 官网参考 OK 登个tom试试然后再计划登个RealServer 计划再用仅主机网卡试试连不上看来要通过JumpServer再联通过网卡访问被踢掉了成功通过跳板机JumpServer登入到RealServer 方法一免密登录现计划尝试方法二只有1个tom 我连了两个tom 看来是根据IP划…...

编程日记 2025/6/29 4:05:29

批量重命名bat

作为一名程序员，怎么可以自己一个个改文件名呢！ Windows的批量重命名会自动加上括号和空格，看着很不爽，写一个bat处理吧！❥(ゝω・✿ฺ) 功能：将当前目录下的所有文件名里面当括号和空格都去掉。用法&…...

编程日记 2025/6/29 3:59:23

Unity动画系统使用整理 --- Playable

Playable API 是一个强大的工具，用于更灵活地控制动画、音频、脚本等时间轴内容的播放和混合。它提供了比传统 Animator 更底层、更可控的方式管理时间轴行为，尤其适合复杂动画逻辑或动态内容组合的场景。优点： 1.Playables API 支…...

编程日记 2025/7/15 11:15:24

用C语言实现的——一个完整的AVL树的交互式系统

一、知识要点 AVL树（Adelson-Velsky and Landis Tree）是一种自平衡二叉搜索树，由俄罗斯计算机科学家 Georgy Adelson-Velsky 和 Evgenii Landis 在 1962 年提出。它具备以下特点： AVL树的性质二叉搜索树（排序树&am…...

编程日记 2025/6/29 4:26:36

洛谷B3648 [语言月赛202208] 你几岁了

#include<bits/stdc.h> using namespace std; int main(){int n;cin>>n;cout<<"I am "<<n<<" years old.";return 0; }...

编程日记 2025/6/29 1:36:01

智能指针入门：深入理解 C++ 的 shared_ptr

文章目录前言一、什么是 shared_ptr？二、创建share_ptr三、使用share_ptr1.输出结果2.结果分析四、工作原理五、注意事项六、使用场景总结前言提示：这里可以添加本文要记录的大概内容： 在 C 的开发中，手动管理内存一直是一项…...

编程日记 2025/6/29 1:35:55

十四、继承与组合（Inheritance Composition）

十四、继承与组合（Inheritance & Composition） 引言 C最引人注目的特性之一是代码复用。组合：在新类中创建已有类的对象。继承：将新类作为已有类的一个类型来创建。 14.1 组合的语法 Useful.h //C14:Useful.h #ifndef US…...

编程日记 2025/6/29 2:23:50

自主添加删除开机启动项

背景有些程序我们需要每次开机自启动，譬如自装的第三方输入法或者网络代理软件等等，而有些程序我们不希望它每次开机自启动，但是奈何这些软件安装的时候自己就给配置好了开机自启动，咱们不知道该去哪找。 anyway，问题…...

编程日记 2025/7/10 17:25:30

2025年第十六届蓝桥杯软件赛省赛C/C++大学A组个人解题

文章目录题目A题目C：抽奖题目D：红黑树题目E：黑客题目F：好串的数目 https://www.dotcpp.com/oj/train/1166/ 题目A 找到第2025个素数 #include <iostream> #include <vector> using namespace std; vector<i…...

编程日记 2025/7/5 21:23:18

Clickhouse 迁移到 Doris 的最佳实践

一、引言在将数据从 Clickhouse 迁移到 Apache Doris / SelectDB Cloud 的过程中，涉及表结构迁移、查询语句迁移以及数据迁移等多个关键环节。每个环节都有其复杂性和需要注意的细节，本文将详细介绍这些内容及对应的最佳实践方法。二、表结构迁移 &…...

编程日记 2025/7/10 15:51:17

thinkphp模板文件缺失没有报错/thinkphp无法正常访问控制器

省流：没有出现下图的报错可能是空路由规则的问题。编者在编写一个新的控制器时还未建立模板文件，理应出现如下报错但是浏览器非但没有报错，反而无法正常访问所有有问题的控制器，表现为都为空白页面，正常的控制器可…...

编程日记 2025/6/29 3:32:20

Spring AI 与 Hugging Face 深度集成：打造高效文本生成应用

Spring AI 与 Hugging Face 深度集成：打造高效文本生成应用前言在人工智能技术蓬勃发展的时代，大型语言模型（LLM）在自然语言处理领域展现出了强大的能力。Hugging Face 作为人工智能社区的重要一员，提供了丰富的模…...

编程日记 2025/6/29 1:39:24

异步FIFO的学习

一、参考视频 FPGA（异步FIFO原理及Verilog代码实现）_哔哩哔哩_bilibili 二、设计图高位套圈时，格雷码和二进制不一样的地方需要注意的问题为什么二进制的变化位数更多，就更容易产生亚稳态呢？ 格雷码格雷码&…...

编程日记 2025/6/29 1:36:06

Java——API基础（String类和StringBuilder类）

一、API概述 API：应用程序编程接口（是一些包含了属性和方法的类） Java API：指的就是JDK中提供各种功能的Java类二、String类（在lang包下，不需要导包） （一）概述 1.J…...

编程日记 2025/6/29 2:34:21

OpenCV图像金字塔详解：原理、实现与应用

一、什么是图像金字塔？ 图像金字塔是图像处理中一种重要的多尺度表示方法，它通过对图像进行重复的平滑和降采样（或上采样）操作，生成一系列分辨率逐渐降低（或升高）的图像集合。这种结构形似金字…...

编程日记 2025/6/29 1:35:53

AI Agent（11）：垂直行业应用

引言本文将聚焦AI Agent在金融、医疗健康、制造业以及零售与电商四个重要垂直行业的应用。我们将分析每个行业的特定需求和挑战，探讨AI Agent如何通过专业化能力为这些行业创造价值，并展望未来发展趋势。垂直行业AI Agent的核心价值在于将通用AI能力与行业专业知识深度结…...

编程日记 2025/7/11 15:51:04

FFmpeg 项目中的三大核心工具详解

FFmpeg 项目中的三大核心工具详解 FFmpeg 是一个功能强大的开源多媒体框架，能够处理几乎所有格式的音视频文件。它包含三个主要的命令行工具：ffmpeg、ffplay 和 ffprobe，这三个工具各自承担不同的功能，共同构成了 FFmpeg 项目的核心。下面将全面详细地介绍这三个工具。 1…...

编程日记 2025/6/29 1:36:08

【Linux网络】 HTTP cookie与session

HTTP cookie与session 引入HTTP Cookie 定义 HTTP Cookie（也称为Web Cookie、浏览器Cookie或简称Cookie）是服务器发送到用户浏览器并保存在浏览器上的一小块数据，它会在浏览器之后向同一服务器再次发起请求时被携带并发送到服务器上。通常&…...

编程日记 2025/6/29 1:40:22

STM32入门教程——GPIO输出

前言本教材基于B站江协科技课程整理，适合有C语言基础、刚接触STM32的新手。它梳理了STM32核心知识点，帮助大家把C语言知识应用到STM32开发中，更高效地开启STM32学习之旅。目录前言 1.知识储备 1.GPIO简介 2.GPIO基本结构 1.APB2外设…...

编程日记 2025/6/29 1:39:20

MongoDB使用x.509证书认证

文章目录自定义证书生成CA证书生成服务器之间的证书生成集群证书生成用户证书 MongoDB配置java使用x.509证书连接MongoDBMongoShell使用证书连接 8.0版本的mongodb开启复制集，配置证书认证自定义证书生成CA证书生成ca私钥： openssl genrsa -out ca…...

编程日记 2025/7/14 3:29:06

FEKO许可证的安全与合规性

在电磁仿真领域，FEKO软件因其出类拔萃的性能和广泛的应用场景，赢得了全球用户的广泛赞誉。但在这背后，是什么让FEKO在众多竞争者中脱颖而出？答案是其许可证的安全与合规性。它们不仅为用户提供了坚固的保障，更确保了用…...

编程日记 2025/6/29 3:30:49

AI大模型学习二十、利用Dify+deepseekR1 使用知识库搭建初中英语学习智能客服机器人

一、说明很多情况下 LLM 知识库可以让 Agent 从中定位到准确的信息，从而准确地回答问题。在一些特定领域，比如客服、检索工具等有应用。传统的客服机器人往往是基于关键词检索的，当用户输入了关键词以外的问题，机器人就无法解决…...

编程日记 2025/6/29 3:22:07

kubuntu系统详解

Kubuntu 系统深度解析（从系统架构到用户体验） 一、定位与核心特性 Kubuntu 是 Ubuntu 的官方 KDE 衍生版，基于 Ubuntu 的稳定底层（Debian 技术栈），搭载 KDE Plasma 桌面环境，主打 “功能丰富、…...

编程日记 2025/7/9 18:43:20

【AutoGen革命】多智能体协作系统的架构设计与工程实践

目录 🌍 前言🏗️ 技术背景与价值🚨 当前技术痛点🛠️ 解决方案全景👥 目标读者画像 🧠 一、技术原理剖析🖼️ 系统架构图解💡 核心运行机制⚙️ 关键技术组件🔄 技术选型…...

编程日记 2025/6/29 4:43:43

西电 | 2025年拟录取研究生个人档案录取通知书邮寄通知

各位考生： 我校2025年硕士研究生录取工作已结束，根据相关工作管理规定，现将个人档案转调及录取通知书邮寄信息确认等有关事宜通知如下： 一、个人档案转调 （邮寄档案请务必使用EMS） 1.全日制考生录取类…...

编程日记 2025/6/29 1:35:59

9.0 C# 调用solidworks介绍1

一、C# 与 SolidWorks 联合开发概述 SolidWorks 提供了完整的 API(应用程序接口)，允许开发者使用 C# 等编程语言进行二次开发，实现自动化设计、定制功能等。主要技术要点包括： 1. API 结构：SolidWorks API 是基于 COM 的接口，包含数百个对象和数千个方法…...

编程日记 2025/6/29 1:36:18

Linux复习笔记（三）网络服务配置（web)

遇到的问题，都有解决方案，希望我的博客能为你提供一点帮助。二、网络服务配置 2.3 web服务配置 2.3.1通信基础：HTTP协议与C/S架构（了解） HTTP协议的核心作用 Web服务基于HTTP/HTTPS协议实现客户端&#xff…...

编程日记 2025/6/29 1:36:13

git和gdb

git基础使用相关概念本地仓库：自己电脑上git客户端远端仓库：管理员端的git服务端多人协作：文件开源，可以多个人一起修改前提 1.一个仓库 2.确认git有没有安装 3.把远端仓库clone 这一步执行完后我们执行ll可以看到&…...

编程日记 2025/6/29 2:14:06

CSRF记录

CSRF（Cross-site request forgery）跨站请求伪造：攻击者诱导受害者进入第三方网站，在第三方网站中，向被攻击网站发送跨站请求。利用受害者在被攻击网站已经获取的注册凭证，绕过后台的用户验证，达…...

编程日记 2025/7/7 22:12:03

嵌入式MCU和Linux开发哪个好？

MCU与Linux：十年磨剑后的选择之道 MCU和Linux到底怎么选？这是一个老生畅谈的问题。而我更想说，这不是简单的优劣对比，而是两条不同的道路，通往不同的风景。今天，我想以一个老兵的视角，聊聊这…...

编程日记 2025/7/13 21:32:21

2024年北理工Python123第六章编程题整理

这章的编程题都好少，难度也不高开始进入文件的输入输出一、字典翻转输出我的代码： ori_dic eval(input()) dic{} if(not isinstance(ori_dic,dict)):#验证输入格式print(输入错误) else:for item in ori_dic.keys():dic[ori_dic.get(item)]itempri…...

编程日记 2025/6/29 4:12:07