跳到主要内容

1 篇博文 含有标签「常用依赖」

查看所有标签

npm前端包

· 阅读需 26 分钟
Fall Zhang
Coding For fun

Create by fall on 02 Mar 2023 Recently revised in 11 Feb 2025

所有的包名称就是 npm 中的包名称,可以直接在 npm 官网进行搜索

系统工具

包名称英文介绍介绍
node-cronThis module allows you to schedule task in node.js using full crontab syntax.计划执行一些内容
cronerTrigger functions or evaluate cron expressions in JavaScript or TypeScript.定时执行任务,并提供即将到来的事件
cronstruecron 表达式转换更可读

git 工具

包名称英文介绍介绍
husky提供 git 相关的 hooks 方法
lint-stagedRun linters against staged git files在 git 缓存区强制执行 lint

命令行相关

包名称英文介绍介绍
concurrentlyRun multiple commands concurrently.实时运行多个命令
start-server-and-testStarts server, waits for URL, then runs test command; when the tests end, shuts down server
live-server提供 npx live-server index.html
http-servernpx http-server [path] [options]
inquirerA collection of common interactive command line user interfaces.通用终端 UI 输入接口
ora优雅的终端加载动画
node-jq命令行 JSON 处理工具
enquirer命令行选择功能工具
node-gypcompiling native addon modules for Node.js.
np更好用的 npm publish
release-itAutomate versioning and package publishing自动打包和发布更新
chalk命令行内容着色
voici.js终端表格打印
fxfx data.jsonJSON 命令行处理工具
gradient-stringBeautiful color gradients in terminal output为命令行加上渐变

操作系统

包名称介绍英文介绍
wallpaper获取或者设置桌面壁纸Get or set the desktop wallpaper
diskusage跨平台磁盘使用统计
node-osc用于在媒体设备之间进行通信的协议

工程化

包名称英文介绍介绍
npm-check-updates-i 交互模式,查看潜在的升级并逐个选择
knipfinds unused files, dependencies and exports in your projects查看 TS 项目中没有用到的文件和依赖
dependency-cruiser将应用的依赖可视化

打包

包名称英文介绍介绍
rspack基于 Rust 的打包工具
rolldown重写 rollup,更快更强

格式化 lint

包名称英文介绍介绍
quick-lint-jsfinds bugs in JavaScript programs.快速分析 js 中的语法错误,C++
sugarssIndent-based CSS syntax for PostCSS.强缩进 CSS 语法检测
@biomejs/biomefast formatter for JavaScript, TypeScript, JSX, and JSONrust 重写的格式化工具,快!

测试

包名称英文介绍介绍
jestUser-friendly glob matching.Based on fast-glob筛选文件目录
autocannonHTTP/1.1 基准测试工具
vitest基于 vite 的测试,开箱可用 import 语法
jsdom纯 JS 实现的 DOM
fetch-mock请求 mock

语法转换

包名称官方介绍介绍
sucraseSucrase is about 20x faster than Babelbabel 的替代品,允许更快地构建
unpluginUnified plugin system for build tools.制作所有打包平台都可以使用的插件
swcsuper-fast TypeScript / JavaScript compiler written in Rust.超快的 ts / js 编译器

通用工具

这些工具是不依赖于 DOM,前后端通用的 package

包名称英文介绍介绍
ohashSuper fast hashing library written in Vanilla JS原生书写的快速哈希库,判断对象内容是否相等
imask文字校验功能
validatorA library of string validators and sanitizers.字符串校验库
zodschema validation字符串等数据的校验工具
destr实现同 JSON.parse 的功能但更安全,支持 ts
file-type使用二进制判断文件的类型
rxjsReactive Extensions For JavaScriptJS 的响应式扩展
chardet文件,字符使用的编码方式检测库
brotli-wasm基于 Brotli 算法的压缩和解压缩工具
filesize把文件大小换算为易读的内容
math.js处理复数、分数、单位、矩阵、符号计算等
@faker-js/fakerGenerate massive amounts of fake data生成大量假数据
ip-address解析和操作 IPv4/6 地址
lossless-json避免数据过大影响 json 解析
china-division中国行政区划(五级)
emoji-regexoffers a regular expression to match all emoji symbols and sequences正则匹配所有的 emoji
culori根据颜色获取颜色名称
color-names根据颜色获取颜色名称(或者反向)
zip-stream
@zip.js/zip.js
fast-csv对 csv 文件进行快速处理
web-worker浏览器和 node 一致的 worker
alfaazthe fastest multilingual word counter号称最快的字数统计工具
workerpool将任务分配给工作池
pretty-ms将 ms 转换为好看的形式
chroma-jszero-dependency color conversions无依赖的颜色转换工具
immer不可变数据处理
mutativeefficient immutable不可变数据,效率更高
js-yaml解析 yaml 文件
tinybasereactive data store for local-first apps.本地响应式数据库
microdiffobject and array differ查看 array 和 object 的不同
madge给出指定文件的依赖关系
browser-or-node判断当前的环境,
merge-anything合并,但是是递归合并
ejs模板引擎
bwip-js条形码生成工具
superstruct数据格式验证工具(运行时
es-toolkit正实现着 Lodash 所有功能,类型支持,性能 up
@diffusionstudio/vits-web本地语音生成工具,阅读
calendar-linkCalendar link generator for popular services在各个流行平台上生成日历事件
tesseract.js基于 js 的 OCR 识别
humanifyjs代码反混淆
colorthiefGrab the color palette from an image从图像中获取主要的颜色
match-sorter确定性最佳匹配数组排序
tinybenchBenchmark your code easily
immutable不可变数据,支持 map
fraction.js数学更精确的计算

时间处理

包名称英文介绍介绍
timeago.jsformat datetime with *** time ago返回 XX 时间之前
luxonworking with dates and times in JavaScript.时间日期处理
date-fns提供超多关于日期的处理函数
chrono-nodeA natural language date parser in Javascript.自然语言日期处理器
dayjs极小的事件处理工具
@formkit/tempoas small and easy to use as possible.小巧好用的时间工具(有TS类型支持)

node

更倾向于服务端(node)使用的内容

包名称英文介绍介绍
undici请求库
graphqla query languageMeta 用的查询语言(一个接口请求前端想要的数据)
staticrypt轻松加密静态站点
migrate一个抽象迁移框架
ws使用 websocket
pm2·后端资源监听
piscina线程池控制工具
nodemon监听文件变动并自动执行
mqttclient library for the MQTT protocol支持 mqtt 协议
pureimage100% JavaScript implementation of theCanvas 2D drawing API for NodeJS纯 node 实现 2d canvas 绘制
tinypool轻量级/微型 Node.js 工作线程池
necord用于创建 Discord 机器人的框架
globbyUser-friendly glob matching.Based on fast-glob筛选文件目录
passport后端权限验证工具
@humanfs/nodewhat a modern, high-level filesytem API should look like.原生 fs API 应该成为的样子
node-usbNode 的改进 USB 库
phinThe lightweight Node.js HTTP client轻量请求库
node-jqc 的 json 处理工具
node-usb使用 node 操作 usb
wait-onwait for files, ports, sockets, and http(s) resources to become available等待文件等变得可用
piscinafast, efficient Node.js Worker Thread Pool implementation工作线程池库
@vinejs/vineOne of the fastest validation library for Node.js号称最快速的表单验证库

文件处理

包名称英文介绍介绍
node-xlsx使用 node 处理 xlsx 文件
imgly/background-removal移除图像背景
sharphigh speed Node.js module is to convert large images超快速图片处理
jimp无依赖的 Node 图像处理库
node-poppler异步 PDF 渲染器
chokidar更好的 watchFile
exiftool-vendored图片拍摄信息数据访问

数据库

包名称英文介绍介绍
lmdbLMDB 的数据存储包装器。
mongooseMongoose is a MongoDB object modeling tool对象建模工具
lowdbSimple to use local JSON database.简单的 JSON 作为 DB
json-serverGet a full fake REST API with zero coding in less than 30 seconds也是 JSON 作为 DB
node-oracledb纯 JS Oracle 数据库驱动程序
pgsql-ast-parsera Postgres SQL syntax parser.SQL 语法解析器
kanel从 Postgres 生成 TypeScript 类型
knexA batteries-included SQL query & schema builder
mysql2专注于性能的 mysql
prismaPrisma is a next-generation ORM下一代关系对象映射(自己说的)
mikro-ormTypeScript ORM for Node.js based on Data Mapper
slonikPostgreSQL client
node-pg-migratedatabase migration management built exclusively for postgres.数据库迁移工具

爬虫

包名称英文介绍介绍
node-html-to-image将 HTML 转换为 img
crawlee网络爬虫和浏览器自动化库
gotNode HTTP 请求库
puppeteer自动化浏览器操作
linkinatornpx linkinator https://example.com/查看网站是否有效

浏览器

更倾向于在前端使用(或者是依赖于 DOM 等浏览器提供的对象),这些包默认是不依赖框架,或者在多个框架中都可以使用的

包名称英文介绍介绍
frappe-ganttA simple, interactive, modern gantt chart library for the web甘特图,日期计划表,时间线
gantt-schedule-timeline-calendarGantt, schedule, timeline and calendar components all in one!计划表,甘特图,时间线
@schedule-x/calendar日历对工作进行管理
@fullcalendar/core日历组件
js-confetti、canvas-confetti添加一个彩带动画
satoriSatori only accepts JSX elementsdom 转化为 svg
highlight.js语法高亮
prismjs语法高亮
shikiA beautiful yet powerful syntax highlighter异步语法高亮,漂亮的代码查看器
sugar-high极小的 jsx 语法高亮
htmlparser2快速解析HTML
gridstack类似于 vue-grid-layout
melonjs成熟的 HTML5 游戏引擎。
eslint-plugin-check-file强制检查文件名称
@algolia/autocomplete-js自动完成组件
qrcode生成二维码
selectoallows select elements in the drag area using the mouse or touch.区域选择组件
@formkit/auto-animate简单的方式添加动画(支持各种框架)
@tiptap/coreBuild collaborative editor apps多人协作的编辑器
mathlive数学公式的编辑和展示
copy-text-to-clipboard将内容粘贴到剪切板(2k)
wavesurfer音频文件的波形查看器
fast-png使用原生 JavaScript 事件解码编码 PNG 图片
svguitar演示:https://github.com/omnibrain/svguitar用 SVG 做吉他谱!
axios-token-manager
axios-mock-adapterAxios adapter that allows to easily mock requestsaxios mock 适配器
@popperjs/corepopover 组件
@floating-ui/dompopover 组件
driver.js第一次进入页面的提示组件
moveable移动缩放旋转等操作
sortablejsSortable is a JavaScript library for reorderable drag-and-drop lists.列表拖拽库
capture-website获取网站截屏
reveal滚动和动画结合起来,构建展示页面
emoji-marta customizable emoji picker自定义 emoji 选择器
ai2html将 Adobe Illustrator 文件转换成 HTML
screenfull用于全屏和取消全屏展示
@tsparticles/enginehttps://particles.js.org/特效引擎
matter-jsJavaScript 2D rigid body physics engine for the web刚体物理引擎
signature_pada JavaScript library for drawing smooth signatures.写字板的签名组件
@algolia/autocomplete-js优化搜索自动提示体验
@bitjson/qr-code二维码生成
embla-carousel(非包名轮播功能(支持主流框架
jsbarcode条形码生成器
perfect-freehand让手绘内容更加优雅
atrament另一个手绘包
tanstack 非包名一系列的 UI 组件
dexieindexDB 封装
tonal音乐理论包
cally无框架无依赖原生日历
facesjs生成卡通脸部(不怎么好看
katexfast TeX math rendering快速渲染的数学符号库
simple-parallax-js视差效果
fabricsvg 和 canvas 互相转换的库
@egjs/infinitegrid多框架支持的无限滚动
html2pdf.jshtml 转为 pdf
ag-grid-community高性能数据 grid(表格)
@glidejs/glide一个滑动块(走马灯效果)
spoiled文字掩盖效果
music-metadata获取音乐原信息
click-to-component点击进入组件的源码编辑

React

包名称英文介绍介绍
react-qrcode-logogenerate a customizable QR Code.生成带 Logo 的 qrcode
react-spinners加载动画
react-springa cross-platform spring-physics first animation library.动画库
react-chronoRender timelines in three different modes时间线组件
plyr-react自定义多媒体播放器组件
@tremor/reactThe react library to build dashboards fast快速快速构建后台
next-sitemapNext.js 应用程序的网站地图生成器
react-wrap-balancer减少内容变换的换行频率次数
react-virtuoso虚拟滚动
boring-avatarsgenerates custom, SVG-based avatars from any username and color palette.根据名称随机生成头像
react-webcam摄像头相关
react-iconsInclude popular icons in your React projectsIcon,但是 React
html-react-parserHTML 字符串解析为 React 代码的解析器
spectacle基于 React 和 JSX 的演示文库
react-virtualized强大的虚拟列表组件
react-grid-layoutRGL is React-only自定义布局的组件
react-tracking用户行为采集框架
@codesandbox/sandpack-react前端沙盒
react-quick-pinch-zoomDOM 放大和拖动,多点控制形状
react-datasheet-grid表格大数据渲染
react-scroll-sync同步滚动内容
react-to-print打印相关功能
react-scroll-parallax滚动动画
react-aria-components40 多个可自定义、支持无障碍访问的组件
shadcn/ui(不是 npm 包名shadcn/ui https://ui.shadcn.com/把 UI 组件生成到你的项目内,高可扩展
react-resize-detectormanaging element size changes in React利用 ResizeObserver 实现
react-use提供 react 的 hooks
jotaisimple useState replacement小型状态管理
zustand状态管理
react-tag-autocomplete自动完成 tag 功能
@million/lint类似 eslint,但给的是性能优化建议
react-geigerhttps://github.com/kristiandupont/react-geiger让 React 应用卡顿时发出声音
onborda产品导览功能(next
spectacle在线预览组件
astroAstro is the all-in-one web framework designed for speed.访问速度优先 md 生成 SSR 框架
reassurePerformance testing companion for React and React Native.react 和 RN 的性能测试工具
pixelmatch像素级别对比图像差异
react-acereact 的一个代码编辑器
valtio为 react 设计状态管理
@tanstack/react-query获取
@codaworks/react-glow高亮追踪功能
react-burger-menu侧边可收起展开菜单样式

UI / 组件

包名称英文介绍介绍
react-content-loader骨架内容组件屏
react-pro-sidebarsidebar 组件库
sonnerSonner is an opinionated toast component for React.一个轻提示的组件
react-day-pickerDayPicker is a date picker component for React.日期选择(a11y)
@dnd-kit/coreBeautiful and accessible drag and drop for lists with ReactReact 可拖拽组件库
react-currency-input-field金额输入框
react-archer在 DOM 之间创建箭头
react-clockReact 时钟
react-barcode条形码
react-phone-number-input国际电话输入
react-awesome-reveal元素可见时触发动画
react-international-phone电话号码输入组件
hamburger-react菜单转换动画
react-force-graphforce-graph 的 react 版本
@codaworks/react-glow追踪高亮的功能
react-big-calendar大型日历的组件
react-signature-pad-wrapper对 signature-pad 的 react 包装
react-datepickerA simple and reusable Datepicker component for React简单的日期选择组件
vaul一个简单的抽屉组件
@uiw/react-codemirrorcodemirror react
simple-keyboard虚拟键盘
react-loading-skeletonreact 加载骨架
react-snap-carousel轮播滚动屏,自适应
react-paginate自定义页脚,用于翻页功能
reechartsd3 react 构建可视化库
@chakra-ui/system
@viselect/react可以通过框选选中多个 DOM

文件相关

包名称英文介绍介绍
yet-another-react-lightbox支持视频和滑动的媒体图片预览组件
react-pdf在 React 应用中显示 PDF。
react-medium-image-zoom图片缩放工具
react-image-crop图片裁剪工具
@onedoc/react-print将 react 生成为 PDF

Vue

包名称英文介绍介绍
vue-cropper一个优雅的图片裁剪插件
vuetifythe world's most popular Vue.js framework for building feature rich, blazing fast applications.Vue 组件库
vue-grid-layout可以拖拽 DOM 的大小
sandpack-vue3vue 沙盒
@formkit/core
shadcn-vueA CLI for adding components to your project.复制组件到你自己的应用程序中。
vue-qr提供 二维码生成
vue-virtual-scrollervue 虚拟滚动的
@inkline/inkline一个可定制的 Vue.js 3 UI/UX 库
radix-vueUI component library for building high-quality, accessible design systems and web appsa11y 高质量 UI 框架
@tinymce/tinymce-vueThe world's #1 open source rich text editor.富文本编辑器

编辑器

组件名称英文介绍介绍
codemirror代码编辑器
slate富文本编辑器
prosemirror文本编辑器
@ckeditor/ckeditor5-core编辑器
lexical可扩展编辑器
monacoVS Code 的编辑器
trixRich Text Editor富文本编辑器
quill所见即所得的编辑器
micromarkCommonMark 最小的实现

markdown

组件名称英文介绍介绍框架
remark解析 MD,输出序列化内容
markdown-itMarkdown parser done right. Fast and easy to extend.
markedMarkdown 解析器和编译器
remark-mdxremark plugin to support the MDX syntax支持 MDX 高亮
@mdx-js/mdx
@penrose/core更多数学相关图形的支持
mermaiddefinitions and a renderer to create and modify complex diagrams.为 markdown 添加更多支持
@milkdown/core编辑 markdown 所见即所得
turndown将 html 转换为 markdown
markdown-to-jsx将 markdown 转换为 jsxreact
@blocknote/core开源多人协作文档
@mdxeditor/editor更轻量的 markdown 编辑器
codehikebridges the gap between Markdown and React把 markdown 转为 react

文件查看

组件名称文档类型介绍
docx-previewdoc/docx前端 docx 文件预览组件
mammothdoc/docx前端 word 编辑文件,可导出为 html
docxdoc/docx简单生成和修改 docx 文件
xlsxxlsx提供 xlsx 数据处理(官方切换了 git 和安装的地址,详见连接
exceljsxlsx操作和书写数据,并且转化为 xlsx 和 JSON
handsontablexlsx数据绑定,数据分析,筛选,排序,和操作
pptxgenjspptx创建 js ppt
@webtoon/psdpsd无依赖的 .psd 文件解析器
@pdfslick/corepdf基于 PDF.js 的 pdf 文件查看器

CSS

组件名称文档类型介绍
css-doodleA web component for drawing patterns with CSS.使用 CSS 画图案
@medv/finderCSS Selector Generator生成 DOM 最短的 selector(选择器)

可视化

组件名称文档类型介绍框架
plotly.jsa standalone Javascript data visualization library独立的可视化库
plotteus时间叙事的可视化库(滚动、UI 控件)
reagraph基于 WebGL 的 React 图形可视化库(600 starsReact
@visx/visx基于 D3 的 React 可视化React
@xyflow/react 或 reactflowbuilding node-based UIs with React or Svelte.流程图,MITReact
@excalidraw/excalidrawvirtual hand-drawn style whiteboard.超级画布react
@glideapps/glide-data-gridhttps://grid.glideapps.com/表格 + 可视化
spacekit.js宇宙 3D 视图
vizzuhttps://lib.vizzuhq.com/latest/新的动画可视化库
cytoscapelibrary for visualisation and analysis关系图,各个内容间的联系
peaks.jsdisplay and interact with audio waveforms音频文件的波形查看器和操作
bpmn-js标准的 BPMN 图
chart.jsSimple yet flexible JavaScript charting for designers & developers简单灵活的 chart
apexchartsbuild interactive data visualizations with simple API编写互动数据

跨端

React Native

包名称英文介绍介绍
react-native-permissionsRN 的统一权限 API
react-native-picker-select选择功能
react-native-svg提供一个兼容层来适配 React。
react-native-shareRN 分享功能
tamaguiStyle and UI for React(web and native)
@shopify/react-native-skiaHigh-performance 2d Graphics for React Native using Skia绘制 2D 图像库
react-native-image-pickerselect a photo/video from the device library or camera.从设备上选择图片文件
@expensify/react-native-live-markdown跨平台 Markdown 编辑器
react-native-bootsplash启动页面
react-native-vision-camerapowerful, high-performance Camera library相机库
react-native-circular-progress动画进度
react-native-background-actions运行后台任务的后台服务库
react-native-filamentRN 3d 渲染引擎
react-native-compressor上传前压缩

tauri

包名称英文介绍介绍

electron

包名称英文介绍介绍