实现 Rollup 插件alias 并使用vitest提高开发效率
本篇文章是对 实现 Rollup 插件 alias | 使用 TypeScript 实现库的基本流程 | 使用单元测试提高开发效率 的总结。其中涉及到开发一个组件库的诸多知识点。
实现一个经常用的 rollup 插件 alias
首先执行npm init命令初始化一个package.json文件,因为插件使用了typescript作为类型校验,所以需要执行tsc --init命令去生成一个ts的配置文件tsconfig.json,执行完上述的命令之后安装项目依赖。
pnpm i rollup typescript @rollup/plugin-typescript tslib -D
先简单实现一下这个插件,插件要求导出一个方法并且返回一个对象
import { Plugin } from 'rollup'
export function alias(): Plugin {return {name: 'alias',resolveId(source: string, importer: string | undefined) {console.log('resolveId', source, importer)return source}}
}
接下来需要将index.ts编译成可执行的js文件,新增一个rollup配置文件rollup.config.js,指定输入以及输出
import { defineConfig } from 'rollup'
import typescript from "@rollup/plugin-typescript"export default defineConfig({input: './src/index.ts',output: {file: './dist/index.js',format: 'es'},plugins: [typescript({module:'esnext'})]
})
在package.json里面新增一条命令,并执行pnpm build
"scripts": {"build": "rollup -c rollup.config.js"},
一般执行到这里会有一个CommonJS和ES module的类型冲突,如图所示

我们只需要在package.json指定类型即可
"type": "module",
再次运行pnpm build可以发现在dist目录下会生成打包完成之后的index.js文件。
当别人去安装你的包的时候需要所指定执行的文件在哪,即修改package.json里面的main字段,由"main": "index.js"改为"main": "./dist/index.js"
使用开发的 alias 插件
新增一个example文件夹新增index.js、add.js写入相关的测试代码
import { add } from './utils/add.js'
console.log(add(1, 2))
export function add (a, b) {return a + b;
}
在example里面执行初始化并且新增rollup配置文件rollup.config.js,并且补充build命令,具体操作和上文类似
import { defineConfig } from 'rollup'
export default defineConfig({input: 'index.js',output: {file: './dist/index.js',format: 'es'}
})
通过在example目录下执行如下命令就可以使用我们开发的插件
// ../上层目录
pnpm i ../ -D
执行完之后会新增如下代码
"devDependencies": {"rollup": "^3.26.2","rollup-alias": "link:.." // 新增的依赖
}

在example/rollup.config.js里面引入我们编写的 alias 插件,完整的代码如下
import { defineConfig } from 'rollup'
import { alias} from 'rollup-alias'export default defineConfig({input: 'index.js',output: {file: './dist/index.js',format: 'es'},plugins: [alias()]
})
在此执行pnpm build可以发现已经成功的打印出了log

为插件添加TS类型提示
首先补充插件的参数类型提示并且完善一下插件逻辑
import { Plugin } from 'rollup'
interface AliasOptions {entries: { [key: string]: string }
}export function alias(options: AliasOptions): Plugin {const { entries } = optionsreturn {name: 'alias',resolveId(source: string, importer: string | undefined) {console.log('resolveId', source, importer)const key = Object.keys(entries).find((e) => {return source.startsWith(e)})if (!key) return sourcereturn source.replace(key, entries[key]) + '.js'}}
}
执行build之后在我们会发给 alias 传参的时候并没有对应的参数类型提示

这里需要在tsconfig.json文件中开启 "declaration": true 功能,以及设置"outDir": "./dist"
在package.json里面添加"types": "./dist/index.d.ts",执行完上述操作之后再次执行 pnpm build


补充单元测试
安装vitest,补充单元测试文件index.spec.ts,添加测试命令
pnpm i vitest -D
// index.spec.ts
import { describe, it, expect } from 'vitest'
import { alias } from '.'describe('alias', () => {it('should replace when match successful', () => {const aliasObj:any = alias({entries: {'@': './utils'}})expect(aliasObj.resolveId('@/add')).toBe('./utils/add.js')})it('should not replace when match fail', () => {const aliasObj: any = alias({entries: {'@': './utils'}})expect(aliasObj.resolveId('!/add')).toBe('!/add')})
})
"scripts": {"test": "vitest"},
我们需要在 build 的时候排除掉我们的测试文件可以在 tsconfig.json 补充如下代码 "exclude": ["./src/*.spec.ts"]
然后执行pnpm test 可以看到这里的测试用例是通过的也可以证明我们写的代码是没问题的。

entries 支持数组格式
这里直接贴完成之后的代码
import { Plugin } from 'rollup'interface AliasOptions {entries: { [key: string]: string } | { find: string, replacement: string }[]
}export function alias(options: AliasOptions): Plugin {const entries = normalizeEntries(options.entries)return {name: 'alias',resolveId(source: string, importer: string | undefined) {console.log('resolveId', source, importer)const entry = entries.find((e) => e.match(source))if (!entry) return sourcereturn entry.replace(source)}}
}function normalizeEntries(entries: AliasOptions["entries"]) {if (Array.isArray(entries)) {return entries.map(({ find, replacement }) => {return new Entry(find, replacement)})} else {return Object.keys(entries).map((key) => {return new Entry(key, entries[key])})}
}class Entry {constructor(private find: string, private replacement: string) { }match(filePath: string) {return filePath.startsWith(this.find)}replace(filePath: string) {return filePath.replace(this.find, this.replacement)}
}
以上就简单的实现了一个rollup插件开发的大致流程
相关文章:
实现 Rollup 插件alias 并使用vitest提高开发效率
本篇文章是对 实现 Rollup 插件 alias | 使用 TypeScript 实现库的基本流程 | 使用单元测试提高开发效率 的总结。其中涉及到开发一个组件库的诸多知识点。 实现一个经常用的 rollup 插件 alias 首先执行npm init命令初始化一个package.json文件,因为插件使用了ty…...
【DSL】ES+DSL 查询语法
【DSL】ESDSL 查询语法 一、前言二、定义1.基本介绍2.语法说明(1)关键字(Keywords)(2)标识符(Identifiers)(3)表达式(Expressions)(4)运算符(Operators)(5)函…...
Vue第三篇:最简单的vue购物车示例
本文参考:Vue Cli(脚手架)实现购物车小案例 - - php中文网博客 效果图: 编写流程: 1、首先通过vue/cli创建工程 vue create totalprice 2、改写App.vue代码如下: <template><div><div v…...
MFC 基于数据库的管理系统
文章目录 初始化设置菜单 添加数据库类创建数据库配置数据库 全部代码 初始化 创建文件选择基于CListView 初始化数据 public:CListCtrl& m_list;CSQLView::CSQLView() noexcept:m_list(GetListCtrl()) {// TODO: 在此处添加构造代码}void CSQLView::OnInitialUpdate() {C…...
EfficientNet论文笔记
EfficientNet论文笔记 通过NAS平衡了channel,depth,resolution,发现在相同的FLOPs下,同时增加 depth和 resolution的效果最好。 数据集效果小于resolution怎么办? EfficientNet—b0框架 表格中每个MBConv后会跟一个…...
系统学习Linux-SSH远程服务(二)
概念 安全外壳协议,提供安全可靠的远程连接 特点 ssh是工作在传输层和应用层的协议 ssh提供了一组管理命令 ssh 远程登陆 scp 远程拷贝 sftp 远程上传下载 ssh-copy-id ssh keygen 生成 提供了多种身份验证机制 身份验证机制 密码验证 需要提供密码 密…...
PyTorch训练RNN, GRU, LSTM:手写数字识别
文章目录 pytorch 神经网络训练demoResult参考来源 pytorch 神经网络训练demo 数据集:MNIST 该数据集的内容是手写数字识别,其分为两部分,分别含有60000张训练图片和10000张测试图片 图片来源:https://tensornews.cn/mnist_intr…...
基于深度学习的高精度道路瑕疵检测系统(PyTorch+Pyside6+YOLOv5模型)
摘要:基于深度学习的高精度道路瑕疵(裂纹(Crack)、检查井(Manhole)、网(Net)、裂纹块(Patch-Crack)、网块(Patch-Net)、坑洼块&#x…...
【裸辞转行】是告别,也是新的开始
一年多了没有更新,是因为去年身体加心理因素辞职了,并且大概率不会再做程序员了,嗯。本来觉得可能再也不会打开 CSDN 了,想了想,还是来做个告别吧,任何事情都该有始有终才对。 回忆碎碎念 是在去年的 11 …...
了解交换机接口的链路类型(access、trunk、hybrid)
上一个章节中讲到了vlan的作用及使用,这篇了解一下交换机接口的链路类型和什么情况下使用 vlan在数据包中是如何体现的,在上一篇的时候提到测试了一下,从PC1去访问PC4的时候,只从E0/0/2发送给了E0/0/3这是,因为两个接…...
Android系统启动流程分析
当按下Android系统的开机电源按键时候,硬件会触发引导芯片,执行预定义的代码,然后加载引导程序(BootLoader)到RAM,Bootloader是Android系统起来前第一个程序,主要用来拉起Android系统程序,Android系统被拉起…...
如何在Ubuntu上安装OpenneBula
OpenNebula是一个开源云计算平台,允许我们在完全虚拟化云中组合和管理VMware和KVM虚拟机 第1步:安装MariaDB数据库服务器 OpenNebula还需要一个数据库服务器来存储其内容。 安装MariaDB: 1 2 sudo apt update sudo apt install mariadb-s…...
解决MySQL中分页查询时多页有重复数据,实际只有一条数据的问题
0 前言 有一个离奇的BUG,在查询时,第一页跟第二页有一个共同的数据。有的数据却不显示。 后来发现是在SQL排序时没用主键排序。 解决:使用主键排序 以下是我准备的举例,可以自己试试。 1 数据准备 SET NAMES utf8mb4; SET FORE…...
【数据结构】时间复杂度---OJ练习题
目录 🌴时间复杂度练习 📌面试题--->消失的数字 题目描述 题目链接:面试题 17.04. 消失的数字 🌴解题思路 📌思路1: malloc函数用法 📌思路2: 📌思路3&…...
京东自动化功能之商品信息监控是否有库存
这里有两个参数,分别是area和skuids area是地区编码,我这里统计了全国各个区县的area编码,用户可以根据实际地址进行构造skuids是商品的信息ID填写好这两个商品之后,会显示两种状态,判断有货或者无货状态,详情如下图所示 简单编写下python代码,比如我们的地址是北京市…...
【SwitchyOmega】SwitchyOmega 安装及使用
文章目录 安装教程使用教程 安装教程 SwitchyOmega 谷歌商店下载链接:https://chrome.google.com/webstore/detail/proxy-switchyomega/padekgcemlokbadohgkifijomclgjgif?hlen-US 在谷歌商店搜索 SwitchyOmega, 选择 Proxy SwitchyOmega 点击 Add t…...
CentOS5678 repo源 地址 阿里云开源镜像站
CentOS5678 repo 地址 阿里云开源镜像站 https://mirrors.aliyun.com/repo/ CentOS-5.repo https://mirrors.aliyun.com/repo/Centos-5.repo [base] nameCentOS-$releasever - Base - mirrors.aliyun.com failovermethodpriority baseurlhttp://mirrors.aliyun.com/centos/$r…...
【LLM】Langchain使用[二](模型链)
文章目录 1. SimpleSequentialChain2. SequentialChain3. 路由链 Router Chain Reference 1. SimpleSequentialChain 场景:一个输入和一个输出 from langchain.chat_models import ChatOpenAI #导入OpenAI模型 from langchain.prompts import ChatPromptTempla…...
简单机器学习工程化过程
1、确认需求(构建问题) 我们需要做什么? 比如根据一些输入数据,预测某个值? 比如输入一些特征,判断这个是个什么动物? 这里我们要可以尝试分析一下,我们要处理的是个什么问题&…...
【MongoDB】SpringBoot整合MongoDB
【MongoDB】SpringBoot整合MongoDB 文章目录 【MongoDB】SpringBoot整合MongoDB0. 准备工作1. 集合操作1.1 创建集合1.2 删除集合 2. 相关注解3. 文档操作3.1 添加文档3.2 批量添加文档3.3 查询文档3.3.1 查询所有文档3.3.2 根据id查询3.3.3 等值查询3.3.4 范围查询3.3.5 and查…...
深入解析Shim在跨版本API兼容中的实战应用
1. 什么是Shim技术 第一次听到"Shim"这个词是在调试一个Flink连接Hive的项目时。当时Hive版本从2.3升级到3.1,本以为要重写大量代码,结果同事说"加个Shim就行了"。这种"神奇胶水"般的技术让我印象深刻。 Shim本质上是一种…...
Revit插件开发效率革命:热重载技术如何彻底改变你的开发流程
Revit插件开发效率革命:热重载技术如何彻底改变你的开发流程 【免费下载链接】RevitAddInManager Revit AddinManager update .NET assemblies without restart Revit for developer. 项目地址: https://gitcode.com/gh_mirrors/re/RevitAddInManager RevitA…...
Qwen3.5-4B-Claude-Opus企业实操:数据治理元数据血缘关系推理补全工具
Qwen3.5-4B-Claude-Opus企业实操:数据治理元数据血缘关系推理补全工具 1. 平台概述 Qwen3.5-4B-Claude-4.6-Opus-Reasoning-Distilled-GGUF是基于Qwen3.5-4B架构的推理蒸馏模型,专门针对企业级数据治理场景中的元数据血缘关系分析任务进行了优化。该模…...
深入浅出ESP32蓝牙HID协议:从报文解析到游戏手柄开发
深入浅出ESP32蓝牙HID协议:从报文解析到游戏手柄开发 在物联网设备与人机交互技术深度融合的今天,蓝牙HID协议已成为连接智能硬件与终端设备的重要桥梁。ESP32作为一款集成Wi-Fi和蓝牙双模通信的微控制器,凭借其出色的性价比和丰富的开发资源…...
【限时公开】20年农业AI工程师压箱底的17条精度校验铁律:从田间采集到模型上线零容错实践手册
第一章:农业图像识别精度校验的底层逻辑与行业特殊性农业图像识别并非通用计算机视觉任务的简单迁移,其精度校验需直面田间场景固有的复杂性:光照剧烈波动、作物生长阶段连续变化、病斑形态高度异质、背景杂草与土壤纹理干扰显著。这些因素共…...
Kubernetes 存储性能优化:从持久卷到存储类
Kubernetes 存储性能优化:从持久卷到存储类 前言 哥们,别整那些花里胡哨的理论。今天直接上硬菜——我在大厂一线优化 Kubernetes 存储性能的真实经验总结。作为一个白天写前端、晚上打鼓的硬核工程师,我对性能的追求就像对鼓点节奏的把控一样…...
QLVideo终极指南:让macOS Finder完美预览所有视频格式
QLVideo终极指南:让macOS Finder完美预览所有视频格式 【免费下载链接】QuickLookVideo This package allows macOS Finder to display thumbnails, static QuickLook previews, cover art and metadata for most types of video files. 项目地址: https://gitcod…...
Windows音频捕获新方案:实现进程级精准录音的技术实践
Windows音频捕获新方案:实现进程级精准录音的技术实践 【免费下载链接】win-capture-audio An OBS plugin that allows capture of independant application audio streams on Windows, in a similar fashion to OBSs game capture and Discords application stream…...
OpenProject全球化协作本地化策略指南:打破语言壁垒的实战方案
OpenProject全球化协作本地化策略指南:打破语言壁垒的实战方案 【免费下载链接】openproject OpenProject is the leading open source project management software. 项目地址: https://gitcode.com/GitHub_Trending/op/openproject OpenProject作为领先的开…...
ExcelJS 实战手册:从零构建企业级Excel报表系统
1. ExcelJS入门:为什么选择它构建企业报表? 第一次接触ExcelJS时,我正为一个电商项目头疼——每天要生成近万条订单数据的报表。尝试过直接输出CSV,但客户坚持要带格式的Excel文件;用PHPExcel处理又遇到内存溢出。直到…...
