常用开发工具库 <a class="header-anchor" href="#常用开发工具库" aria-label="Permalink to &quot;常用开发工具库&quot;">​

Vue Composition API 的常用工具集

ahooks

一套高质量可靠的 React Hooks 库

时间处理

dayjs

一个轻量的处理时间和日期的 JavaScript

moment

JavaScript 日期处理类库

date-fns

轻量级的 JavaScript 日期库,纯函数实现支持模块化

lunar-javascript

支持阳历、阴历、佛历和道历的日历工具库

calendar.js

中国农历（阴阳历）和西元阳历即公历互转JavaScript库

请求处理

axios

基于promise的HTTP库,可以运行在浏览器和node.js中使用

got

一个人性化且功能强大的 Node.js HTTP 请求库

oh-my-fetch

更好的 fetch 请求,适用于浏览器和 node.js

VueRequest

Vue响应式请求库,轻松管理请求状态（支持SWR,轮询,错误重试,缓存,分页等）

字符串文本处理

camelcase

将使用破折号/点号/下划线/空格分隔的字符串转换为驼峰形式（camelCase）

change-case

快速转换字符串格式,支持 camelCase, PascalCase, Capital Case, snake_case, param-case, CONSTANT_CASE 等

emoji-regex

匹配 emoji 的正则表达式

网页文件预览

vue-office

更易用的文件预览, 支持docx、xlsx、pdf文件

精度处理

big.js

用于任意精度的十进制算术运算

number-precision

超小型精确四则运算

动画

typed.js

动态打字效果

AutoAnimat

只需一行代码即可为您的应用添加动作

countup.js

数字滚动效果

tween.js

补间动画引擎

lottie

基于跨平台动画渲染库,用于解析使用 Bodymovin 导出为 json 的 Adobe After Effects 动画

gsap

GreenSock 动画平台（GSAP）可以对 JavaScript 可以操作的所有内容进行动画处理

react-countup

基于 countup.js 封装的 React 组件

react-transition-group

基于 DOM 的过渡动画

framer-motion

一个生产级的 React 动画库

react-spring

一个基于弹性力学的现代动画库

特效

canvas-confetti

五彩纸屑特效

在线 🌍

浏览器嵌入一个全球地区，可滚动，可标点，可旋转

存储

localForage

一个快速、简单的浏览器存储库,快速使用indexedDB

滚动处理

body-scroll-lock

一种通用的 body 滚动锁定解决方案

better-scroll

重点解决移动端（已支持 PC）各种滚动场景需求的插件

react-scroll

React 滚动组件

smooth-scrollbar

可定制、可扩展和高性能的自定义滚动条解决方案

事件处理

hotkeys-js

用于捕获键盘输入和组合键

图片处理

html2canvas

页面截图（将 DOM 节点绘制为 canvas 再生成图片

html-to-image

页面截图（将 DOM 节点绘制为 canvas 或 SVG 再生成图片）

satori

页面截图(将 HTML 和 CSS 转换为 SVG)

medium-zoom

为图片提供可缩放的功能(网页图片预览)

qrcode

QR 码和 2d 条码生成器(支持浏览器和 Node)

qrcode.react

React 的二维码组件

qrcode-terminal

在终端中生成二维码

文件处理

FileSaver.js

保存/下载文件（受 blob 的大小和内存限制）

StreamSaver.js

保存/下载文件（不受 blob 的大小和内存限制）

sheetjs

用于 Excel 的读取和导出

node-fs-extra

Node fs 模块的增强（如 promise 的支持）

rimraf

用于删除文件和文件夹,类似 rm -rf

node-glob

文件查找

globby

使用更友好的文件查找（支持 promise、否定模式、ignore 文件配置等）

cpy

使用更友好的文件复制（支持 glob 模式）

版本号处理

semver

语义化版本解析器

富文本

braft-editor

美观易用的React富文本编辑器,基于draft-js开发

代码编辑器

monaco-editor

微软开源的基于 VSCode 的代码编辑器。支持智能提示、代码高亮

代码高亮

prismjs

轻量级、可扩展的语法高亮库

highlight.js

具有自动语言检测功能的语法高亮库

轮播

swiper

高性能的触摸滑动插件,支持 HTML、 Vue 、React、AngularJS、 Svelte

vue-awesome-swiper

基于swiper封装的Vue组件,支持 Vue 2 和 Vue 3

网页嵌入编辑器

codemirror-editor-vue3

基于 Codemirror 5开发的Vue3在线IDE插件，仅支持 vue3.

网页活动

lucky-canvas抽奖插件

基于 TS + Canvas 开发的【大转盘 / 九宫格 / 老虎机】抽奖插件

数据校验

validator.js

字符串验证

async-validator

异步表单验证

表单处理

formik

提供组件和 Hooks 来管理表单状态和验证

react-hook-form

用于表单状态管理和验证的 React Hook

formily

阿里统一前端表单解决方案,支持 React, Vue 2/3

表格

ag-gri

功能齐全的高性能表格,支持HTML、Vue、React、AngularJS、 Web Components

拖放

Sortable.js

适用于现代浏览器和触摸设备的可重新排序的拖放列表

dnd-kit

React的现代、轻量级、高性能、可访问和可扩展的拖放工具包

用户体验

vue-tour

用户引导动画（使用 box-shadow 实现高亮选中）

react-joyride

用户引导动画（使用 mix-blend-mode 实现高亮）

shepherd

用户引导动画（基于 SVG 和 floating-ui）

intro.js

用户引导动画（使用 box-shadow 实现遮罩）

driver.js

用户引导动画（使用 outline 实现遮罩）

screenfull.js

将页面或任何元素全屏显示

nprogress

轻量级的加载进度条

floating-ui

创建浮动元素的轻量库（气泡提示、用户引导、下拉框等）

复制到剪贴板

clipboard.js

复制到剪贴板

copy-to-clipboard

复制到剪贴板

clipboardy

在 Node.js 中访问系统剪贴板

开发调试

http-server

在本地快速启动一个静态文件服务器（轻量）

serve

在本地快速启动一个静态文件服务器（支持各种配置功能强大）

vconsole

一个轻量、可拓展、针对手机网页的前端开发者调试面板

eruda

在移动浏览器上展示开发者调试面板

编译&构建&打包

Vite

下一代前端工具链

Rollup

一个 JavaScript 模块打包器

Turbo

基于 Rust 的增量打包和构建系统

Webpack

一个用于现代 JavaScript 应用程序的静态模块打包工具

Babel

Babel 是一个 JavaScript 编译器

esbuild

基于 Go 的前端编译工具

SWC

基于 Rust 的 Web 编译平台

tsup

零配置的 TypeScript 打包工具

unbuild

一个统一的 javascript 构建系统

unplugin

用于构建工具的统一插件系统

Webpack 相关

webpack-chain

使用链式 API 来生成和简化 webpack 的配置的修改

speed-measure-webpack-plugin

统计 webpack 在各阶段的构建速度

webpack-bundle-analyzer

通过可视化分析 webpack 打包文件的大小

解析相关

cheerio