
常用工具库整理
收集个人使用过或遇到的类库,按照类别进行分类,方便查找(不定期更新)
工具库
lodash
一个一致性、模块化、高性能的 JavaScript 实用工具库
ramda
专为函数式编程而设计的工具库
qs
带有一些附加安全性的请求参数 parse 和 stringify 库
ahooks
一套高质量可靠的 React Hooks 库
vueuse
Vue Composition API 的常用工具集
时间处理
dayjs
轻量的处理时间和日期的 JavaScript 库,和 Moment.js 的 API 设计保持完全一样
moment
JavaScript 日期处理类库
date-fns
轻量级的 JavaScript 日期库,纯函数实现支持模块化
lunar-javascript
支持阳历、阴历、佛历和道历的日历工具库
calendar.js
中国农历(阴阳历)和西元阳历即公历互转
请求处理
精度处理
字符串文本处理
camelcase
将使用破折号/点号/下划线/空格分隔的字符串转换为驼峰形式(camelCase)
change-case
快速转换字符串格式,支持 camelCase, PascalCase, Capital Case, snake_case, param-case, CONSTANT_CASE 等
emoji-regex
匹配 emoji 的正则表达式
动画
typed.js
动态打字效果
countup.js
数字滚动动画
react-countup
基于 countup.js 封装的 React 组件
tween.js
补间动画引擎
lottie
基于跨平台动画渲染库,用于解析使用 Bodymovin 导出为 json 的 Adobe After Effects 动画
gsap
GreenSock 动画平台(GSAP)可以对 JavaScript 可以操作的所有内容进行动画处理
react-transition-group
基于 DOM 的过渡动画
framer-motion
一个生产级的 React 动画库
react-spring
一个基于弹性力学的现代动画库
特效
本地存储
滚动处理
body-scroll-lock
一种通用的 body 滚动锁定解决方案
better-scroll
重点解决移动端(已支持 PC)各种滚动场景需求的插件
better-scroll
React 滚动组件
smooth-scrollbar
可定制、可扩展和高性能的自定义滚动条解决方案
事件处理
图片处理
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
glob
文件查找
globby
使用更友好的文件查找(支持 promise、否定模式、ignore 文件配置等)
cpy
使用更友好的文件复制(支持 glob 模式)
版本号处理
数据校验
富文本
代码编辑器
代码高亮
轮播
swiper
高性能的触摸滑动插件,支持 Javascript Vue 3 React AngularJS Solid Svelte
vue-awesome-swiper
基于 swiper 封装的 Vue 组件,支持 Vue 2 和 Vue 3
表单处理
formik
提供组件和 Hooks 来管理表单状态和验证
react-hook-form
用于表单状态管理和验证的 React Hook
formily
阿里巴巴统一前端表单解决方案,支持 React, React Native, Vue 2/3
表格
拖放
用户体验
react-joyride
用户引导动画(使用 mix-blend-mode 实现高亮)
vue-tour
用户引导动画(使用 box-shadow 实现高亮选中)
shepherd
用户引导动画(基于 SVG 和 floating-ui)
intro.js
用户引导动画(使用 box-shadow 实现遮罩)
driver.js
用户引导动画(使用 outline 实现遮罩)
clipboard.js
复制到剪贴板
copy-to-clipboard
复制到剪贴板
clipboardy
在 Node.js 中访问系统剪贴板
screenfull.js
将页面或任何元素全屏显示
nprogress
轻量级的加载进度条
floating-ui
创建浮动元素的轻量库(气泡提示、用户引导、下拉框等)
开发调试
serve
在本地快速启动一个静态文件服务器(支持各种配置功能强大)
http-server
在本地快速启动一个静态文件服务器(轻量)
eruda
在移动浏览器上展示开发者调试面板
vconsole
一个轻量、可拓展、针对手机网页的前端开发者调试面板
编译&构建&打包
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 打包文件的大小
解析相关
自动化工具
playwright
支持 Firefox / Chrome / WebKit(Safari) 三大浏览器的自动化工具
puppeteer
控制 Chromium 的自动化工具
puppeteer-extra
puppeteer 的插件扩展
lint / 格式化相关
prettier
代码格式化工具
eslint
ECMAScript/JavaScript 代码检查工具
stylelint
CSS 代码检查工具
markdownlint
Markdown 格式检查工具
commitlint
Git Commit Messages 格式检查工具
相关辅助工具
husky
Git Hooks 工具,让你操作 Git Hooks 变得更容易
lint-staged
只对 Git 暂存文件运行 lint 从而提高速度
commitizen
commit 辅助工具,获得有关提交消息格式的即时反馈
CLI 相关
zx
用 JavaScript 或 TypeScript 编写简单的命令行脚本
inquirer
交互式命令行工具
enquirer
交互式命令行工具(更好看)
prompts
轻量级交互式命令行工具
execa
Node child_process 模块的增强(如 promise 的支持、移除输出中最后的换行符等)
npm-run-all
用于并行或串行执行多个 npm 脚本
commander.js
编写指令和处理命令行
yargs
命令行参数解析
plop
轻量级的项目搭建生成工具
dotenv
从 .env 文件加载环境变量到 process.env
dotenv-expand
dotenv 的变量扩展,使 .env 文件支持变量语法
simple-git
在 node 中执行 git 命令
cosmiconfig
搜索并加载配置文件