黑白梦黑白梦

  • 文章
  • 专栏
  • 文章
  • 专栏
全部专栏

一些好用的 npm 前端开源库

收集一些好用的前端开源库，主要是 npm 包

共 78 篇文章更新于 2026-08-17
  1. 01Prisma、Drizzle 等时间存储与时区问题Prisma、Drizzle 的时间类型都会存储为 UTC 时间，JS 时间对象转换 SQL 也会基于 UTC 。应在数据库存 UTC，展示层转本地时区。2025-10-19
  2. 02Prisma 使用笔记Prisma 是一个 TypeScript 语言支持良好的 ORM 框架，具备良好的数据模型、自动迁移、类型安全和自动完成功能。2025-10-19
  3. 03前台代码高亮方案 highlight.js 应用，支持网页与微信小程序常用的富文本编辑器，具有代码块功能，但没有代码高亮，这里引入 highlight.js 实现高亮，并尝试支持普通网页、单页应用及微信小程序。2020-08-16
  4. 04通过 marked 渲染 markdown 为富文本格式，并设置样式、代码高亮最近，将博客的文章编辑器从富文本改为了 markdown 编辑器，为了最终渲染的效果，需完成富文本的转化。2021-08-16
  5. 05使用 babel 7 后，解决老旧 npm 库对旧版 babel-core 的依赖问题目前 babel 7 的使用已经很普遍了，新创建的项目，不应该再用 6 的版本。但有一些库，还对 babel-core 有着依赖。并且，这些库也不能再升级。这时就可以安装 babel-core 的 7.0.0-bridge.0 版本，来解决这个问题。2021-08-23
  6. 06在 React 和 umi.js 中使用 Handsontable 电子表格组件Handsontable 是一个 js 表格组件，提供了数据绑定、验证、排序、上下文菜单等功能，最后一个开源免费的版本是 6.2.2 。2019-08-31
  7. 07在 Node.js 中一键安装 ffmpeg 依赖配置 ffmpeg 通常需要做很多设置工作，但通过该 npm 包我们可以直接在 Node.js 中引用 ffmpeg，它会被自动安装。2022-06-24
  8. 08Node.js 中的同步的 http 请求库 sync-request比如在 webpack 配置文件中，如需请求数据，异步的模式下往往不好写。sync-request 可以写出同步的代码，让 node.js 暂停直到请求完毕。2022-07-13
  9. 09openbase 网站，对比各种同类组件将开源软件包进行比较，让我们可以多方面对比，更容易选择正确的开源包。2023-04-06
  10. 10viewerjs 易用的图片查看组件博客图片需要进行放大、切换等效果，引入 viewerjs 这种第三方组件，可以快速获得丰富、完善的图片播放功能。2023-04-08
  11. 11常用的免费图片、插画、图标资源网站博客、公众号等自媒体配图，图片、插画、图标等，最好使用 CC0 等协议的免费图片。这里收录一些我常用的资源网站。2022-03-09
  12. 12Node SerialPort 控制串行接口设备Node.js 库，控制串行接口设备，可用于 electron 中2019-10-26
  13. 13http-server 简单静态服务器生成简单静态服务器，可用于本地访问、局域网访问相关资源。2019-06-21
  14. 14cheerio 类 jq 语法进行访问与操作 html 文本对于 html 文本，使用 cheerio 进行数据提取，通过 jq 的语法就可以进行数据的操作。2021-09-19
  15. 15Node.js 图像处理库 SharpSharp 是高性能的图像处理库，使用了libvips，速度极快，它提调整尺寸、剪裁、旋转、转换格式等图像处理功能，下载量在同类仓库中比较高。2019-11-25
  16. 16tesseract.js 文字 OCR 识别库适用于 100 多种语言的纯 Javascript OCR，无需联网即可使用。2020-03-25
  17. 17fetch-jsonp 跨域 jsonp 请求类似 window.fetch 的 JSONP 请求库2020-04-09
  18. 18fonts.css 跨平台 CSS 中文字体解决方案提供了黑体、宋体、楷体等常用的字体代码2020-05-17
  19. 19localForage 前端储存库localForage 通过简单类似 localStorage API 进行异步存储。优先使用 IndexedDB 进行存储，可以存储较大数据，也能存储多种类型的数据，而不仅仅是字符串。2020-06-22
  20. 20pinyin 汉字转拼音转换中文字符为拼音。可以用于汉字注音、排序、检索。2020-07-13
  21. 21qs 对 url 参数进行 URL encodedget 参数如果需要写得比较复杂，需要通过 qs 来进行编码。2020-09-18
  22. 22scriptjs 异步引入 js 文件加载一些未提供 npm 引入的库时，可以把它放到了 static 目录，通过 scriptjs 引入。2020-10-15
  23. 23cross-env 与 dotenv 设置 Node.js 环境变量信息在命令中指定环境变量信息，可用于指定不同的项目环境。cross-env 用于在命令中直接设置环境变量信息，dotenv 用于读取不同的 .env 文件。2020-11-24
  24. 24ts-node-dev 运行 ts 项目可直接执行 ts 文件，不用使用 tsc 监听编译，可自动重启2021-01-10
  25. 25js-xss 白名单过滤工具库传入 html 文本进行过滤，返回过滤后的文本。2021-02-05
  26. 26js-cookie 前端处理 cookie在浏览器中通过 JavaScript 处理 cookies2021-04-18
  27. 27react-native-elements 跨平台 UI 组件可同时用于 react-native 和 react-native-web 中2021-05-07
  28. 28ua-parser-js 解析 user-agent 信息user-agent 的内容存在较多混淆信息，判断起来比较麻烦。找一个可解析详细信息的库，方便且更准确。2021-05-20
  29. 29jsoneditor 专门的 JSON 编辑器可用于查看、编辑、格式化与校验 JSON 的编辑器，基于 codemirror2021-06-17
  30. 30js 滤镜库对比使用滤镜库 Philter 和 camanjs2021-07-01
  31. 31jszip 浏览器二进制压缩、解压库解压上传的 zip 文件，可以解压并读取文件的名字、内容2021-07-24
  32. 32qrcode-parser 二维码解析 一个纯JavaScript的二维码阅读库，接受File对象，图片url，base64。2021-10-03
  33. 33qrcode 生成二维码常用的二维码生成库2021-10-13
  34. 34signature_pad 电子签名板signature_pad 是用于绘制平滑签名的JavaScript库，是基于HTML5 canvas ，适用于 PC 和移动端。2021-11-18
  35. 35quill 富文本编辑器Quill 是一种现代的 WYSIWYG 编辑器，具备兼容性和可扩展性。2022-01-04
  36. 36tui.image-editor 图片编辑器强大的图片编辑器，可直接调用，或者通过 api 调用编辑器的能力2022-01-15
  37. 37tui.editor 所见即所得的 Markdown 编辑器所见即所得的 Markdown 编辑器，支持 GFM 标准、图表和 UML 扩展。2022-02-03
  38. 38tinymce 富文本编辑器tinymce 是最流行的富文本编辑器之一2022-03-20
  39. 39iframe-resizer 自动解析 iframe 高度使 iframe 的高度和宽度的自动调整大小2022-04-30
  40. 40ffmpeg.wasm 浏览器中的 ffmpeg把 ffmpeg 跑在浏览器里2022-07-06
  41. 41videojs 视频播放器世界上最流行的开源 HTML5 播放器框架之一2022-05-22
  42. 42react-beautiful-dnd 拖拽排序库这个拖拽库的拖拽动画较为顺滑，且拥有相对更简易的 api。2022-05-13
  43. 43react-intl 国际化组件较为成熟，支持 hooks 使用。2022-06-16
  44. 44why did you render 排查 react 渲染情况用于在开发环境跟踪 react 组件的渲染情况2022-07-27
  45. 45React Hooks 合集 ahooks 和 react-use ahooks 和 react-use 是两个 React Hooks 合集，拥有丰富的 Hooks 可直接使用。2022-08-04
  46. 46react-indiana-drag-scroll 移动端元素拖动滚动组件该组件的介绍很简洁：实现拖动滚动。用于在移动端替换掉 PC 的滚动条，通过手势滑动形式进行滚动。2022-08-27
  47. 47html 页面转换为图片 ，并转为图片或 PDF 下载html2canvas 可直接在用户浏览器上将网页或部分网页生成"屏幕截图"，屏幕截图基于 DOM。2022-09-19
  48. 48swiper 滑动轮播库最流行的滑动轮播库之一，支持竖向、横向滑动，支持PC和移动端。2022-11-14
  49. 49katex 渲染数学公式katex 库支持渲染 LaTeX 数学公式，可结合 markdown 使用。2022-11-22
  50. 50通过 markdown-it 解析 markdown 文本markdown-it 是流行的 markdown 解析库，插件丰富。2022-11-25
  51. 51react-content-loader 创建骨架屏占位符加载效果开箱即用，可定制，轻量级。2023-03-06
  52. 52react-split-pane 可调整大小的拆分窗格分割窗格 React 组件，可以嵌套或垂直或水平分割2023-03-12
  53. 53react-rnd 对元素拖拽和调整大小创建可拖拽、调整大小的元素。rnd 的意思是：resizable and draggable。2023-03-21
  54. 54sortablejs 拖拽排序SortableJS 对列表通过拖放 (drag-and-drop) 进行拖拽排序。它还提供了 Vue.Draggable 等比较成熟的包装组件。2022-05-11
  55. 55react-image-magnify 缩略图鼠标移入放大插件一个用于触摸和鼠标的响应式React图像缩放组件，专为购物网站产品细节设计。2023-04-09
  56. 56前端 id 生成：uuid 与 nanoid有时需要前端 id 生成的场景，这里比较使用常用的 id 生成库 uuid 与 nanoid ，以及探讨 id 冲突问题的解决方法。2023-04-12
  57. 57代码编辑器库 CodeMirror 6 使用笔记CodeMirror 6 对 ts 、ES6 模块引入等的支持都很好，各个语言、插件等都单独拆成了包，可按需引入，也有一个好用的 react 包装组件。2023-05-06
  58. 58copy-to-clipboard 文本复制使用方法很简单的文本复制插件，也有不错的 react 包装器。2023-05-16
  59. 59 vditor 更好用的 markdown 编辑器组件这个编辑器组件功能很多，基本上能想到的都包含了，编辑体验良好，移动设备使用体验也不错。记录一些使用笔记。2023-07-06
  60. 60DOMPurify 更好用的前端 XSS 字符串清理库DOMPurify 用于进行 HTML 文本的过滤，它会尽可能保留更多无害的属性，尽可能保持原有效果。2023-07-13
  61. 61Tailwind CSS 基础概念、配置、常见问题和使用笔记Tailwind CSS 是当前最流行的样式框架，它有许多优势；对 IDE 支持友好，适合各种框架使用；掌握基础用法后，整体记忆成本不大。2024-02-25
  62. 62zustand 简易好用的 React 状态管理库没有样板代码，没有额外学习成本，简单清晰，上手即用，配合 Immer 可使语句更简便。支持中间件，比如很方便地将全局状态同步到 localStorage 缓存中。2023-12-15
  63. 63使用 pro-components 的 DragSortTable 拖动排序表格@ant-design/pro-components 以前需要引入 react-sortable-hoc 及大量代码，而现在已有可拖拽表格组件 DragSortTable，可直接使用。2023-12-18
  64. 64Tailwind CSS 组件框架 shadcn/ui 使用笔记shadcn/ui 是由 shadcn 开发的 Tailwind Css 组件框架，可将组件自动拷贝至项目中。2024-02-25
  65. 65Hono.js 使用笔记Hono.js 是目前比较流行的后端框架，支持所有 JS 运行时，使用简便，路由和中间件语法类似 express/koa ，可很方便地结合 zod 进行参数校验，支持类似 tRPC 的前后端 RPC 同构能力。2024-10-27
  66. 66使用 Node.js 操作 ffmpeg ，实现分割视频与合并视频小工具使用 Node.js 操作 ffmpeg ，将大视频分割为多个视频片段、合并多个视频片段为一个视频。2024-10-29
  67. 67drizzle-orm 使用笔记2024 主流的 ts orm 工具，类型安全，无二进制文件依赖，支持各种 serverless 运行时和数据库服务。2024-11-02
  68. 68Clerk 服务使用笔记，结合 Next.js 和 Hono.js 使用Clerk 是一个 serverless 登录鉴权服务，支持大量第三方的 OAuth 登录，很方便就能搭建起登录体系，免费额度也较高。结合 Next.js 和 Hono.js 使用可很容易实现前后台全面的鉴权。2024-11-03
  69. 69探索 Transformers.js：核心机制与本地化模型实践Transformers.js 是 Hugging Face 生态系统中的一款工具库，可以在浏览器或 Node.js 环境中执行自然语言处理、计算机视觉和音频处理等任务。本文结合一款 Electron 本地翻译应用的项目开发经验，探索 Transformers.js 在真实场景下的落地过程。2026-04-11
  70. 70Tesseract.js 构建本地图像文字识别模块Tesseract.js 提供了一套轻量级的 JavaScript OCR 解决方案，兼容浏览器与 Node.js 环境。本文将结合项目的工程实践，阐述如何通过本地语言包、图像预处理与任务队列机制，在 Electron 客户端构建完整的离线图像文字识别模块。2026-04-08
  71. 71Electron 独立 Node 运行时打包指南在 Electron 中运行重度依赖 C/C++ 原生模块或高负载计算任务时，内置的 Node.js 可能会遇到底层兼容瓶颈。为此，将标准的 Node.js 可执行文件打包进应用，并作为独立子进程运行，是一种稳妥的架构解法。本文结合打包 onnxruntime-node 等原生模块的踩坑记录，分享该方案的落地细节。2026-04-11
  72. 72React Query 项目实践介绍 React Query 的核心概念、API ，及其在项目管理后台项目中的实践，涵盖了基于 Next.js App Router 的单例 Provider 配置、结合 URL 参数的数据获取策略以及自动缓存失效机制。2026-02-19
  73. 73Lucia 登录校验与项目实践Lucia 提供基于 Session + Cookie 的登录校验方案，服务端通过校验会话拿到用户信息，前端通过受保护页面与接口的组合完成登录态管理。本篇笔记用于记录博客的 SSR 改造中，Lucia 在 Next.js App Router 中的实践。2026-02-17
  74. 74基于 @sentry/react 实现一个简易的 JS 错误收集功能前端的报错有很多种类，可通过 @sentry/react 的 beforeSend 事件，组织数据格式上报到自己的接口中。2025-06-27
  75. 75@emotion/react 配置 css props ，优雅的 css in js 方案css in js 有很多写法，此前主要接触的是 styled 写法，但这个写法不太习惯，也需要额外的 IDE 插件支持。emotion 的 css props 则相当于拓展了原生 style 标签，没有任何心智负担，也不影响现有项目的样式模式，可以无缝接入。2024-11-19
  76. 76fluent-ffmpeg 操作音频元数据音频文件的元数据（如标题、艺术家、专辑等）是很多播放器归类的依据，为了更好的管理音频文件在 VLC 等播放器中的分组，可以根据需要对音频的元数据进行处理。2025-05-11
  77. 77Prisma 实现乐观锁与悲观锁乐观锁是一种思想，不实际加锁，通过版本号控制一致性；悲观锁是在数据库中加行锁或表锁。Prisma 的文档中有实现乐观锁的示例，也可以通过执行原生 SQL 语句实现悲观锁。2024-09-09
  78. 78Mermaid 渲染方案设计与实现分享博客在 Next.js App Router 架构下的 Markdown Mermaid 图表渲染方案，采用服务端骨架占位、客户端按需动态加载、LRU 内存缓存、并发竞态控制与双主题适配机制。2026-08-17

©2015-2026 黑白梦 粤ICP备15018165号

联系: heibaimeng@foxmail.com