跳到主要内容

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

查看所有标签

npm前端包

· 阅读需 18 分钟
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.定时执行任务,并提供即将到来的事件
cronstrue将 cron 表达式转换更可读

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​

包名称英文介绍介绍