前端开发中常用的插件库

ahooks
一个高质量且可靠的React Hooks库。

class-variance-authority（CVA）
是一个专注于解决CSS类管理问题的库。

classnames
是一个在React开发中非常流行的JavaScript工具库，它可以帮助开发者有条件地连接类名字符串。

copy-to-clipboard
一个用于在浏览器中通过JavaScript将文本复制到剪贴板的轻量级开源项目。

CryptoJS
是一个广泛使用的JavaScript加密库，提供了多种高效的加密算法和便捷的接口。

Day.js
是一个极简的JavaScript库,可以为现代浏览器解析、验证、操作和显示日期和时间。

ELKJS
 是一个基于 JavaScript 的图表自动布局库，专为处理具有方向性和端口的节点链接图而设计。

emoji-mart
是一个开源的Emoji选择器组件，专为现代Web应用设计。

fast-deep-equal
是一个高效的深度比较库，由Evgeny Poberezkin创建，用于快速、精确地比较复杂数据结构，特别是对象和数组。它支持循环引用和特殊类型值（如函数、日期和正则表达式），避免了使用JSON.stringify方法带来的性能消耗。

i18next
是一个功能强大的国际化库，专门用于帮助网站或应用程序实现多语言支持。

i18next-resources-to-backend
 是一个用于将 i18next 资源发送到后端的工具或插件。

Immer
是一个用于处理不可变数据状态的JavaScript库。

js-audio-recorder
是一个用于浏览器端的JavaScript录音插件，支持多种音频格式的录制、播放和下载。

js-cookie
是一个简单、轻量级的处理cookies的JavaScript API。

jwt-decode
是一个用于解码JWT（JSON Web Token）的JavaScript库。专门用于在浏览器环境中解码Base64Url编码的JWT令牌。它可以帮助开发者轻松解析JWT，并获取其中的有效载荷信息。

KaTeX
是一个轻量级的JavaScript库，用于在Web上渲染数学公式。

lamejs
是一个用JavaScript编写的高性能MP3编码器库，能够在浏览器和Node.js环境中将音频数据编码为MP3格式。

lexical
是一个由Facebook（现在称为Meta）开源的JavaScript Web 文本编辑器框架。

lodash-es
是Lodash库的一个模块化版本，专为使用ECMAScript(ES)模块规范的现代项目设计。它利用ES模块的特性，如“tree shaking”，使得构建工具能够在编译阶段自动移除未使用的函数，仅将实际使用的Lodash函数包含在最终的生产代码中，从而显著减小打包后的文件大小。

mermaid.js
是一个基于JavaScript的开源库，主要用于生成各种图表，包括流程图、时序图、甘特图等。它使用简洁的文本语法来描述图表结构，并将其转换为可视化的图形，从而使得图表生成过程简单且直观。

mime库
是一个JavaScript库，主要用于处理文件的MIME类型。它可以帮助开发者识别文件的类型和扩展名，特别是在Web开发和处理HTTP请求时非常有用。通过mime库，可以查询文件的MIME类型或根据MIME类型查询文件的扩展名，这对于处理静态文件和配置HTTP响应头等场景特别有用。

negotiator
是一个用于内容协商的JavaScript库，它帮助开发者根据客户端请求头中的信息动态决定返回的数据格式。

Next.js
是一个用于构建全栈Web应用的React框架。

pinyin-pro
是一个专业的JavaScript中文转拼音库，具备多音字识别准确、体积轻量、性能优异、功能丰富等特点。

qrcode.react
是一个基于React的组件库，专门用于生成二维码并渲染到DOM中。

qs
是一个流行的JavaScript库，专门用于处理URL中的查询字符串。它能够将查询字符串解析为JavaScript对象，或者将JavaScript对象序列化为查询字符串。这在Web开发中尤其有用，因为查询字符串常用于传递参数和数据。

rc-textarea 
是一个React组件库，它提供了丰富的配置选项和功能，用于在Web应用中创建和管理文本区域组件。这个库被广泛应用于需要文本编辑功能的项目中，如博客平台、CMS系统等。

React-Input-Autosize 
是一个专为 React 框架设计的组件，旨在提供自动调整大小的文本输入框。这个组件能够根据用户输入的内容动态改变其宽度，从而提升用户体验和界面美观性。

react-easy-crop 
是一个用于在 React 应用中进行图像和视频裁剪的组件。它通过提供易于交互的方式，允许用户通过拖拽、缩放和旋转来裁剪媒体内容，非常适合需要图像处理功能的Web应用。

react-error-boundary
是一个React组件，用于在React应用程序中捕获和处理其子组件树中的JavaScript错误。它通过提供一种机制来隔离错误，防止整个应用因一个或多个组件中的错误而崩溃，从而提升应用的稳定性和用户体验。

React Hook Form
是一个通过React Hooks提供简单直观API来处理表单状态和验证的库。它旨在减少组件的重新渲染，提升性能，并提供内置的多种验证规则和自定义验证逻辑的支持。

react-hotkeys-hook
是一个React Hook，它允许开发者在组件中轻松添加和管理键盘快捷键。这个库通过声明式的方式简化了键盘事件的监听和响应流程，使得开发者可以更专注于业务逻辑的实现。

react-i18next 
是一个专为 React 应用设计的国际化解决方案，它通过集成 i18next 库来提供多语言支持。这个库使得开发者能够轻松地将应用翻译成不同的语言，从而提升应用的全球可访问性和用户体验。

react-infinite-scroll-component
 是一个专为React应用设计的开源组件，它允许开发者在用户滚动到页面底部时自动加载更多内容。这种无限滚动技术能够提供更流畅的浏览体验，避免频繁的页面刷新和等待时间，特别适用于展示大量数据的场景，如新闻、商品列表或社交媒体帖子。

react-markdown 
是一个专为React设计的库，它允许开发者将Markdown格式的字符串安全地转换为React元素。这个库通过构建虚拟DOM来确保React只替换从语法树中变化的部分，从而提高了性能。

react-multi-email
 是一个React组件，它允许用户在输入框中逐一添加和移除邮箱地址，同时自动格式化输出。这个组件特别适用于需要收集多个联系人信息的应用场景，如用户邀请系统、批量邮件发送等。

react-papaparse 
是一个专为React设计的组件，它利用了PapaParse库来解析CSV文件。该组件允许用户通过简单的界面操作选择和上传CSV文件，并在React应用中以表格或其他形式展示解析后的数据。

React-PDF-Highlighter 
是一款基于 React 的开源组件库，旨在为 PDF 文档添加标注功能。它允许开发者轻松实现文本和图像高亮，并通过弹出式文字增强注释体验。项目采用MIT许可证发布，由 TypeScript 编写，保证了代码质量和类型安全。

React Slider
是一个开源的、基于React的滑块组件库，旨在提供简单而强大的界面来创建滑动条。它由Zillow团队开发并维护，支持自定义样式、双向绑定和键盘导航等功能。

React-SortableJS
 是一个专为 React 设计的开源组件库，它通过集成 SortableJS 库来提供拖放排序功能。这个库使得开发者能够在 React 应用中轻松实现交互式的列表排序，提升用户体验和界面的动态性。

React Syntax Highlighter
 是一个用于在 React 应用中实现语法高亮的组件库。它支持使用 Prism.js 或 Highlight.js 进行语法高亮，并通过内联样式来渲染代码块。这个库的主要编程语言是 JavaScript，并且它是基于 React 框架开发的。

React Tooltip 
是一个用于在React应用中实现工具提示（Tooltip）功能的组件库。它允许开发者在特定元素上添加提示信息，以提供上下文帮助或描述性文本，从而增强用户体验。

react-window 
是一个专为 React 设计的开源组件库，旨在通过仅渲染部分大型数据集（仅填充视口的部分）来提高性能。这种方法有助于解决一些常见的性能瓶颈，如减少初始渲染所需的工作和时间，以及减少内存占用。

React Window Infinite Loader
是一个基于react-window库的React组件，旨在通过实现无限滚动功能来提升应用的性能和用户体验。该组件能够将大型数据集分割成小块，并在用户滚动到接近列表底部时按需加载数据，从而减少初始渲染所需的时间和内存占用。

ReactFlow 
是一个用于构建流程图、工作流程和数据流的开源库，它基于React和D3.js。ReactFlow的主要目的是帮助开发者快速构建和定制流程图，使得开发者可以专注于实现业务逻辑。

RecordRTC
 是一个基于WebRTC技术的JavaScript库，它允许开发者直接从浏览器录制多种媒体流。通过使用WebRTC的getUserMedia API，RecordRTC能够捕捉音频、视频甚至屏幕录制等媒体流，并将其保存为多种格式，如WAV、WebM和MP3。这使得RecordRTC成为满足不同需求的多功能工具。

rehype-katex 
是 Rehype 的一个插件，它利用 KaTeX 来渲染 LaTeX 数学表达式。这个库特别适用于需要在网页上展示高质量、接近印刷品质的数学公式的场景。

rehype-raw 
是一款针对 rehype 的插件，它能够重新解析文档树，包括原始节点，确保在转换过程中数据和定位信息的完整保留。这个插件特别适用于处理嵌入在Markdown中的HTML代码，使得复杂的转换和处理成为可能。

remark-breaks 
是一个专为 Markdown 设计的插件，它能够将用户输入的软换行（如直接按回车键产生的换行）自动转换为 HTML 中的标签。这种转换使得 Markdown 文档在渲染成 HTML 时，能够保持用户原始输入的换行格式，从而提升文档的可读性和用户体验。

remark-gfm 
是一个基于 unified 和 remark 生态系统的开源插件，它的主要任务是扩展 Markdown 的解析和渲染能力，以支持 GFM 的一系列特性。这些特性包括自动链接字面量、脚注、删除线、表格以及任务列表等，使得开发者能够在项目中轻松实现对这些 GFM 特性的支持。

remark-math
 是一个专为 Markdown 设计的插件，它使得在 Markdown 文件中支持 LaTeX 样式的数学表达式成为可能。通过结合 rehype-katex 或 rehype-mathjax，您可以在编译时将这些数学公式转化为可渲染的 HTML，无需客户端 JavaScript，这大大提高了文档的便携性和性能。

Scheduler
是React中的一个独立包，它可以独立于React在其他库中使用。其主要作用是负责任务的调度和优先级管理，确保任务在合适的时间执行，从而优化应用性能。

Server Only
是MySQL安装过程中的一个选项，它表示仅安装数据库服务器，而不包括其他组件或工具。这个选项适用于那些只需要运行数据库而不需要开发相关工具的环境。例如，当您在服务器上部署一个MySQL实例时，如果该服务器仅用于存储和检索数据，而不需要进行任何开发活动，那么选择Server Only模式将是最合适的。

Sharp 
是一个专为 Node.js 环境设计的图像处理库，它基于 libvips 库封装而来，提供了快速且高质量的图像处理功能。这个库的主要目的是帮助开发者在 Node.js 应用程序中高效地处理图像，包括调整大小、裁剪、旋转、格式转换等操作。

Sortable.js 
是一个轻量级的JavaScript库，专门用于在Web应用中实现拖放排序功能。它提供了简单而灵活的API，使得开发者可以轻松地实现拖放功能，并允许用户通过拖放来重新排序列表、网格和其他元素。

SWR 
是 Vercel 公司开源的一个 npm 包，也是由 Next.js（React 框架）背后的同一团队创建。它提供了几个 Hooks，用于在 React 中通过缓存获取数据。SWR 这个名字来源于 stale-while-revalidate，这是一种 HTTP 缓存失效策略，即首先从缓存中返回数据（可能是过期的），同时发送 fetch 请求（重新验证），最后得到最新数据。

tailwind-merge 
是一个专为解决 Tailwind CSS 类名合并问题而生的开源工具库。它提供了一个高效的函数 twMerge，允许开发者在JavaScript环境中无缝融合多个 Tailwind CSS 类而不引发样式冲突。该库支持从 Tailwind CSS v3.0 到 v3.3 的所有版本，并且可以在所有现代浏览器和 Node.js >=12 环境中运行。

use-context-selector 
是一个专为解决 React Context 在性能方面问题而设计的开源库。它通过提供一个 useContextSelector 钩子，允许开发者选择性地监听和获取 Context 中他们真正关心的部分，从而避免不必要的重新渲染，提高应用性能。

uuid
是一个用于在JavaScript中生成通用唯一标识符（Universally Unique Identifier）的库。由32个字符组成的标准，通常表示为8-4-4-4-12的形式。它的主要目的是确保在时间和空间上的唯一性，避免重复和冲突。

Zod 
是一个 TypeScript 优先的模式声明和验证库，旨在通过静态类型推断来简化数据验证过程。它允许开发者只需声明一次验证器，Zod会自动推断出静态 TypeScript 类型，从而消除重复的类型声明。

Zundo 
是一个专为 React Native 设计的开源库，旨在为应用程序提供撤销和重做功能。它允许用户通过简单的API调用来撤销或重做之前的操作，从而增强用户体验和操作的灵活性。

Zustand 
是一个德语单词，意为“状态”。它是一个小巧而强大的状态管理库，专为React应用程序设计，旨在提供简单、直观且高效的状态管理方式。通过使用钩子机制，Zustand使得状态管理变得自然和无缝，从而简化了React应用的开发过程。

---

package.json文件中devDependencies是指在开发过程中需要的依赖项，但生产环境中不需要这些依赖项。

安装插件时使用--save-dev

npm install 插件名 --save-dev

简写形式

npm install 插件名 -D

Autoprefixer
是一个用于解析CSS并根据Can I Use的数据自动添加浏览器前缀的PostCSS插件。它通过解析 CSS 文件并依据 Can I Use 的数据，自动为 CSS 规则添加必要的浏览器厂商前缀。这样，开发者可以专注于编写标准的 CSS 代码，而无需手动添加各种前缀来确保跨浏览器兼容性。

Bing Translate API
是微软提供的一项翻译服务，允许开发者通过API接口调用Bing的翻译功能，实现文本在不同语言之间的自动转换。这项服务对于需要多语言支持的应用程序或网站来说非常有用，可以帮助开发者轻松实现国际化和本地化。

code-inspector-plugin
是一个由快手前端团队开发的插件，旨在提升前端开发的效率。它允许开发者在浏览器中点击任意DOM元素，即可自动打开集成开发环境（IDE）并跳转到该元素对应的源代码位置。这极大地简化了在大型项目中查找和编辑特定代码段的过程，提高了开发效率。

cross-env 
是一个 Node.js 包，用于在不同操作系统上设置环境变量，特别是在运行 JavaScript 脚本时。不同操作系统使用不同的命令来设置环境变量，这可能导致开发人员需要编写不同的脚本来适应不同的平台。cross-env 的目的是解决这个问题，使设置环境变量变得更加便捷和可移植。

ESLint 
是一个用于识别和报告 JavaScript 代码中问题的工具，这些问题包括语法错误、代码风格问题、逻辑错误等。它帮助开发者保持代码的一致性和高质量，通过强制执行一套编码规范来避免潜在的错误。

eslint-config-next 
是一个为 Next.js 项目提供默认 ESLint 配置的库，旨在帮助开发者以最佳方式使用 Next.js。它集成了一系列针对 Next.js 应用的一致性规则，有助于捕获常见的问题和错误。

eslint-plugin-storybook
 是一个 ESLint 插件，专为 Storybook 项目设计。它允许开发者在 Storybook 项目中使用 ESLint 来检查和修复代码中的错误、潜在问题以及风格不一致的问题。通过这个插件，开发者可以确保 Storybook 项目中的组件和文档遵循一致的编码规范，从而提高代码质量和可维护性。

Husky 
是一个流行的 Node.js 工具，用于在特定 Git 操作（如提交、推送等）发生时自动触发脚本。这些脚本可以用于执行各种任务，比如代码格式化、质量检查、单元测试等，从而帮助团队保持一致的代码质量和开发流程。

Jest 
是由 Facebook 开发的一个开源 JavaScript 测试框架，主要用于创建、运行和编写测试。它支持多种测试类型，包括单元测试、集成测试和端到端测试。Jest 的设计目的是简化测试过程，提供高效的测试运行环境和丰富的内置功能。

jest-environment-jsdom 
是一个为 Jest 测试框架设计的插件，它允许开发者在 Node.js 环境中运行原本需要在浏览器中执行的 JavaScript 代码。通过使用 JSDOM（JavaScript DOM），它能够模拟出一个浏览器环境，使得前端代码能够在非浏览器环境下进行单元测试和集成测试。

lint-staged 
是一个用于在 Git 暂存区的文件上运行代码检查工具的工具。它的主要目的是在代码提交之前，自动对修改过的文件进行检查和修复，以确保代码符合团队设定的标准和规范。通过这种方式，lint-staged 帮助开发者及时发现并修复潜在的代码问题，从而提高代码的整体质量和可维护性。

Magicast 
是一个强大的开源工具，旨在通过简化的语法和优雅的接口，帮助开发者轻松地修改JavaScript和TypeScript源代码。它基于AST（抽象语法树），并结合了recast和babel的解析能力，使得代码修改变得如同操作JSON一样简单。

PostCSS
是一个用于处理 CSS 的 JavaScript 工具，它通过将 CSS 转换为抽象语法树（AST），然后利用插件来分析和修改这些规则，从而实现对 CSS 代码的转换和优化。

Sass
（Syntactically Awesome Style Sheets）是一个最初由Hampton Catlin设计并由Natalie Weizenbaum开发的层叠样式表语言。Sass通过引入变量、嵌套规则、混合宏、继承等高级特性，旨在简化和优化样式表的编写过程，提高代码的可维护性和开发效率。

Storybook 
是一个专为 UI 组件设计、开发和文档化而创建的工具。它提供了一个独立的开发环境，使得开发人员可以专注于组件级别的开发，而无需处理整个应用程序的复杂性。通过这个工具，你可以独立地测试、预览、文档化和管理组件。

Tailwind CSS 
是一个功能丰富且实用性优先的CSS框架，用于快速构建定制化的设计。它通过提供大量小型、可复用的类（工具类），使得开发者可以根据需要自由组合这些类来创建自定义的界面组件。这种方式避免了过度使用特定样式，从而创建更精简、可维护的代码。

ts-node 
是一个 TypeScript 执行引擎和 REPL（Read-Eval-Print Loop），它能够在 Node.js 环境下直接运行 TypeScript 代码，无需预先编译成 JavaScript。通过挂接 Node.js 的模块加载 API，ts-node 实现了与其他 Node.js 工具和库的无缝衔接。

UglifyJS 
是一个强大的 JavaScript 工具集，用于解析、最小化、压缩和美化 JavaScript 代码。它通过解析重新生成 JS 代码的语法树，实现代码的优化和混淆，从而提高代码的执行效率和安全性。