一些好用的 npm 前端开源库

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

共 61 篇文章

Tailwind CSS 基础概念、配置、常见问题和使用笔记

2024-02-25

Tailwind CSS 是当前最流行的样式框架，它有许多优势；对 IDE 支持友好，适合各种框架使用；掌握基础用法后，整体记忆成本不大。

zustand 简易好用的 React 状态管理库

2023-12-15

没有样板代码，没有额外学习成本，简单清晰，上手即用。

使用 pro-components 的 DragSortTable 拖动排序表格

2023-12-18

@ant-design/pro-components 以前需要引入 react-sortable-hoc 及大量代码，而现在已有可拖拽表格组件 DragSortTable，可直接使用。

DOMPurify 更好用的前端 XSS 字符串清理库

2023-07-13

DOMPurify 用于进行 HTML 文本的过滤，它会尽可能保留更多无害的属性，尽可能保持原有效果。

copy-to-clipboard 文本复制

2023-05-16

使用方法很简单的文本复制插件，也有不错的 react 包装器。

vditor 更好用的 markdown 编辑器组件

2023-07-06

这个编辑器组件功能很多，基本上能想到的都包含了，编辑体验良好，移动设备使用体验也不错。记录一些使用笔记。

代码编辑器库 CodeMirror 6 使用笔记

2023-05-06

CodeMirror 6 对 ts 、ES6 模块引入等的支持都很好，各个语言、插件等都单独拆成了包，可按需引入，也有一个好用的 react 包装组件。

前端 id 生成：uuid 与 nanoid

2023-04-12

有时需要前端 id 生成的场景，这里比较使用常用的 id 生成库 uuid 与 nanoid ，以及探讨 id 冲突问题的解决方法。

react-image-magnify 缩略图鼠标移入放大插件

2023-04-09

一个用于触摸和鼠标的响应式React图像缩放组件，专为购物网站产品细节设计。

sortablejs 拖拽排序

2022-05-11

SortableJS 对列表通过拖放 (drag-and-drop) 进行拖拽排序。它还提供了 Vue.Draggable 等比较成熟的包装组件。

react-rnd 对元素拖拽和调整大小

2023-03-21

创建可拖拽、调整大小的元素。rnd 的意思是：resizable and draggable。

react-split-pane 可调整大小的拆分窗格

2023-03-12

分割窗格 React 组件，可以嵌套或垂直或水平分割

react-content-loader 创建骨架屏占位符加载效果

2023-03-06

开箱即用，可定制，轻量级。

通过 markdown-it 解析 markdown 文本

2022-11-25

markdown-it 是流行的 markdown 解析库，插件丰富。

katex 渲染数学公式

2022-11-22

katex 库支持渲染 LaTeX 数学公式，可结合 markdown 使用。

swiper 滑动轮播库

2022-11-14

最流行的滑动轮播库之一，支持竖向、横向滑动，支持PC和移动端。

html2canvas 页面转换为 canvas ，并转为图片或 PDF 下载

2022-09-19

html2canvas 可直接在用户浏览器上将网页或部分网页生成"屏幕截图"，屏幕截图基于 DOM。

react-indiana-drag-scroll 移动端元素拖动滚动组件

2022-08-27

该组件的介绍很简洁：实现拖动滚动。用于在移动端替换掉 PC 的滚动条，通过手势滑动形式进行滚动。

React Hooks 合集 ahooks 和 react-use

2022-08-04

ahooks 和 react-use 是两个 React Hooks 合集，拥有丰富的 Hooks 可直接使用。

why did you render 排查 react 渲染情况

2022-07-27

用于在开发环境跟踪 react 组件的渲染情况

react-intl 国际化组件

2022-06-16

较为成熟，支持 hooks 使用。

react-beautiful-dnd 拖拽排序库

2022-05-13

这个拖拽库的拖拽动画较为顺滑，且拥有相对更简易的 api。

videojs 视频播放器

2022-05-22

世界上最流行的开源 HTML5 播放器框架之一

ffmpeg.wasm 浏览器中的 ffmpeg

2022-07-06

把 ffmpeg 跑在浏览器里

在 React 和 umi.js 中使用 Handsontable 电子表格组件

2019-08-31

Handsontable 是一个 js 表格组件，提供了数据绑定、验证、排序、上下文菜单等功能，最后一个开源免费的版本是 6.2.2 。

iframe-resizer 自动解析 iframe 高度

2022-04-30

使 iframe 的高度和宽度的自动调整大小

tinymce 富文本编辑器

2022-03-20

tinymce 是最流行的富文本编辑器之一

tui.editor 所见即所得的 Markdown 编辑器

2022-02-03

所见即所得的 Markdown 编辑器，支持 GFM 标准、图表和 UML 扩展。

tui.image-editor 图片编辑器

2022-01-15

强大的图片编辑器，可直接调用，或者通过 api 调用编辑器的能力

quill 富文本编辑器

2022-01-04

Quill 是一种现代的 WYSIWYG 编辑器，具备兼容性和可扩展性。

jsoneditor 专门的 JSON 编辑器

2021-06-17

可用于查看、编辑、格式化与校验 JSON 的编辑器，基于 codemirror

signature_pad 电子签名板

2021-11-18

signature_pad 是用于绘制平滑签名的JavaScript库，是基于HTML5 canvas ，适用于 PC 和移动端。

qrcode 生成二维码

2021-10-13

常用的二维码生成库

qrcode-parser 二维码解析

2021-10-03

一个纯JavaScript的二维码阅读库，接受File对象，图片url，base64。

使用 babel 7 后，解决老旧 npm 库对旧版 babel-core 的依赖问题

2021-08-23

目前 babel 7 的使用已经很普遍了，新创建的项目，不应该再用 6 的版本。但有一些库，还对 babel-core 有着依赖。并且，这些库也不能再升级。这时就可以安装 babel-core 的 7.0.0-bridge.0 版本，来解决这个问题。

jszip 浏览器二进制压缩、解压库

2021-07-24

解压上传的 zip 文件，可以解压并读取文件的名字、内容

js 滤镜库

2021-07-01

对比使用滤镜库 Philter 和 camanjs

ua-parser-js 解析 user-agent 信息

2021-05-20

user-agent 的内容存在较多混淆信息，判断起来比较麻烦。找一个可解析详细信息的库，方便且更准确。

react-native-elements 跨平台 UI 组件

2021-05-07

可同时用于 react-native 和 react-native-web 中

js-cookie 前端处理 cookie

2021-04-18

在浏览器中通过 JavaScript 处理 cookies

js-xss 白名单过滤工具库

2021-02-05

传入 html 文本进行过滤，返回过滤后的文本。

ts-node-dev 运行 ts 项目

2021-01-10

可直接执行 ts 文件，不用使用 tsc 监听编译，可自动重启

cross-env 指定环境变量信息

2020-11-24

在命令中指定环境变量信息，可用于指定不同的项目环境。

scriptjs 异步引入 js 文件

2020-10-15

加载一些未提供 npm 引入的库时，可以把它放到了 static 目录，通过 scriptjs 引入。

qs 对 url 参数进行 URL encoded

2020-09-18

get 参数如果需要写得比较复杂，需要通过 qs 来进行编码。

pinyin 汉字转拼音

2020-07-13

转换中文字符为拼音。可以用于汉字注音、排序、检索。

localForage 前端储存库

2020-06-22

localForage 通过简单类似 localStorage API 进行异步存储。优先使用 IndexedDB 进行存储，可以存储较大数据，也能存储多种类型的数据，而不仅仅是字符串。

fonts.css 跨平台 CSS 中文字体解决方案

2020-05-17

提供了黑体、宋体、楷体等常用的字体代码

fetch-jsonp 跨域 jsonp 请求

2020-04-09

类似 window.fetch 的 JSONP 请求库

tesseract.js 文字 OCR 识别库

2020-03-25

适用于 100 多种语言的纯 Javascript OCR，无需联网即可使用。

openbase 网站，对比各种同类组件

2023-04-06

将开源软件包进行比较，让我们可以多方面对比，更容易选择正确的开源包。

常用的免费图片、插画、图标资源网站

2022-03-09

博客、公众号等自媒体配图，图片、插画、图标等，最好使用 CC0 等协议的免费图片。这里收录一些我常用的资源网站。

前台代码高亮方案 highlight.js 应用，支持网页与微信小程序

2020-08-16

常用的富文本编辑器，具有代码块功能，但没有代码高亮，这里引入 highlight.js 实现高亮，并尝试支持普通网页、单页应用及微信小程序。

通过 marked 渲染 markdown 为富文本格式，并设置样式、代码高亮

2021-08-16

最近，将博客的文章编辑器从富文本改为了 markdown 编辑器，为了最终渲染的效果，需完成富文本的转化。

Node.js 图像处理库 Sharp

2019-11-25

Sharp 是高性能的图像处理库，使用了libvips，速度极快，它提调整尺寸、剪裁、旋转、转换格式等图像处理功能，下载量在同类仓库中比较高。

cheerio 类 jq 语法进行访问与操作 html 文本

2021-09-19

对于 html 文本，使用 cheerio 进行数据提取，通过 jq 的语法就可以进行数据的操作。

http-server 简单静态服务器

2019-06-21

生成简单静态服务器，可用于本地访问、局域网访问相关资源。

Node SerialPort 控制串行接口设备

2019-10-26

Node.js 库，控制串行接口设备，可用于 electron 中

viewerjs 易用的图片查看组件

2023-04-08

博客图片需要进行放大、切换等效果，引入 viewerjs 这种第三方组件，可以快速获得丰富、完善的图片播放功能。

在 Node.js 中通过 @ffmpeg-installer/ffmpeg 一键安装 ffmpeg 依赖

2022-06-24

配置 ffmpeg 通常需要做很多设置工作，但通过该 npm 包我们可以直接在 Node.js 中引用 ffmpeg，它会被自动安装。

Node.js 中的同步的 http 请求库 sync-request

2022-07-13

比如在 webpack 配置文件中，如需请求数据，异步的模式下往往不好写。sync-request 可以写出同步的代码，让 node.js 暂停直到请求完毕。