前端排行榜

常用js库汇总

• spark-md5：md5编码，二进制md5编码
• crypto-js：加密、解密：base64、AES、sha256、hmacSHA512
• js-base64：base64编码、解码
• copy-to-clipboard 剪切复制到粘贴板
• DOMPurify 针对 HTML、MathML 和 SVG 的仅支持DOM、快速、高容错的 XSS 过滤器

HTML5 可以在文档中使用 MathML 元素，对应的标签是 ... 。

MathML 是数学标记语言，是一种基于XML（标准通用标记语言的子集）的标准，用来在互联网上书写数学符号和公式的置标语言。

• keycode-js 键盘code

• react-visibility-sensor React组件，当它进入或离开窗口视口时通知您

• MonacoEditor web（vscode）代码编辑器

• vxe-table 一个基于 vue 的 PC 端表格组件

• pinia 是一个用于 Vue 的状态管理库，类似 Vuex, 是 Vue 的另一种状态管理方案，Pinia 支持 Vue2 和 Vue3

• rsuite-table、ali-react-table react表格组件

• JS工具库：lodash、outils

• jsPDF 生成pdf文件

• react-contexify react鼠标右击菜单

• simplebar、simplebar-react 滚动条组件

• react-custom-scrollbars 滚动条组件

• Fabric canvas框架，它是画布元素之上的交互式对象模型

• cross-env 这是一款运行跨平台设置和使用环境变量的脚本

• husky、yorkie 可以让我们向项目中方便添加git hooks

• lint-staged 是一个由glob模式在git暂存文件上运行linters的工具

• markdown-it markdown解析器，100%支持通用markdown、扩展、语法插件

• VuePress Vue 驱动的静态站点生成工具

• storybook、dumi 是一款为组件开发场景而生的文档工具（渲染组件 demo）。Storybook 可支持 React、Vue、Angular及更多框架。dumi 仅支持react。

• docusaurus React 构建的静态站点生成工具

• file-saver 一个在客户端保存文件的解决方案，非常适合在客户端上生成文件的Web应用程序

• js-xlsx 一个强大的解析和编写excel文件的库

• reveal.js ppt库

• classnames：用于有条件地将类名连接在一起

• styled-components：css in js，将给定的样式包装成一个组件，可以直接使用这个组件，也不需要组件和样式之间的映射，即创建后就是一个正常的React 组件

• emotion：css in js

• slash：将Windows反斜杠路径转换为斜杠路径：foo\\bar➔ foo/bar

• native-base：react native & web组件库

• react-window：用于高效渲染大型列表和表格数据的 React 组件

• Xstate、redux、mobx： JavaScript 状态容器，提供可预测化的状态管

• zustand、recoil、jotaireact-redux、mobx-react、jotai：React 状态管理库。

• recoil：Recoil是React应用程序的实验性状态管理库。它提供了一些单独使用React很难实现的功能，同时与React的最新功能兼容

• jscodeshift：JavaScript代码修改工具包。Jscodeshift 能够解析 js、ts ，将 js 、ts内容解析成 AST(Abstract Syntax Tree) 语法树，然后提供一些便利的操作接口，方便我们对各个节点进行更改。

• 字体图标库：iconfont、iconpark、font-awesome

• windi css、tailwind css、unocss：css框架。

• immutable：是一种持久化数据。一旦被创建就不会被修改。修改immutable对象的时候返回新的immutable。但是原数据不会改变。在使用旧数据创建新数据的时候，会保证旧数据同时可用且不变，同时为了避免深度复制复制所有节点的带来的性能损耗，immutable使用了结构共享，即如果对象树种的一个节点发生变化，只修改这个节点和受他影响的父节点，其他节点则共享。

• react-spaces：允许您将页面或容器划分为可嵌入的锚点，可滚动和可调整大小的空格的反应组件。

• react-use-scroll-to-element-hook：用于滚动到同一页面上的元素的React hook

• use-deep-compare-effect：react的useEffect挂钩，对依赖进行深度比较，而不是比较引用相等

• anime.js：JS动画库

• js-xss、dompurify：防止xss攻击

• alibaba/hooks：hooks库

• storybookjs/telejson、xijs：序列化与反序列化

• 前端缓存库：localForage、dexie.js、PouchDB、idb、idb-keyval、JsStore 或者 lovefield 之类的库，这些库使 IndexedDB 对开发者来说更加友好。

• any-touch：手势库

• tinypng：在线压缩图片

• gh-pages：自动创建gh-pages分支并推送文件到该分支。关联远程项目时需要使用SSH而不是HTTPS的github项目地址，否则推送不上去。

  With a local install of gh-pages, you can set up a package script with something like the following:

  "scripts": {
    "deploy": "gh-pages -d dist"
  }

  And then to publish everything from your dist folder to your gh-pages branch, you'd run this:

  npm run deploy

• Puppeteer： 是一个 Node 库，它提供了一个高级 API 来通过 DevTools 协议控制 Chromium 或 Chrome。

• cross-env：跨平台运行设置和使用环境变量的脚本工具。当您使用NODE_ENV =production, 来设置环境变量时，大多数Windows命令提示将会阻塞(报错)。 cross-env 能够提供一个设置环境变量的scripts，让你能够以unix方式设置环境变量，然后在windows上也能兼容运行。

• vConsole 一个轻量、可拓展、针对手机网页的前端开发者调试面板。

• react-media-recorder

• react-query 请求、缓存、更新异步数据的react hook

CSS

windi css、tailwind css、unocss、hover.css、animate.css、Magic、csshake、hint.css、kite

SSR

zhangyuan/ssr：支持 React/Vue2/Vue3

Next.js：React

Nuxt.js：Vue

Remix：全栈

低代码/无代码

• H5-Dooring
• 码良
• amis
• JakHuang / form-generator
• alibaba/lowcode-engine
• alibaba/designable
• alibaba/formily
• alibaba/x-render
• jeecg-boot
• vite-vue3-lowcode
• Tencent/tmagic-editor

CLI

tsdx ：Zero-config CLI for TypeScript package development

CLI工具

https://segmentfault.com/a/1190000037702173

• chalk[1] （控制台字符样式）

• commander[2] （实现 NodeJS 命令行），例如 node -v 的 -v ，打印版本号

• download[3] （实现文件远程下载）

• download-git-repo (下载GitHub, GitLab, Bitbucket的仓库)

• fs-extra[4] （增强的基础文件操作库）

• handlebars[5] （实现模板字符替换）

• inquirer[6] （实现命令行之间的交互）

  • inquirer-autocomplete-prompt 输入字母自动查找选项
  • inquirer-maxlength-input-prompt 输入最大值

• log-symbols[7] （为各种日志级别提供着色符号）

• ora[8] （优雅终端 Spinner 等待动画）

• update-notifier[9] （npm 在线检查更新）

• shelljs —— 常用的 shell 命令支持

• debug —— 类似于 chalk

• execa —— 子进程管理工具

• rimraf —— The UNIX command rm -rf for node.

• glob —— Match files using the patterns the shell uses

• listr2 —— 管理执行任务，支持串行、并行

• pkg-install —— 在js中安装npm依赖包

• slash —— 系统路径符处理

• zx —— 用 JS 执行shell

webpack

• @pmmmwh/react-refresh-webpack-plugin、react-refresh 用于react组件快速刷新，刷新后仍会保存state。需以下配合：webpack-dev-server v4.0.0 开始，热模块替换是默认开启的（hot：true）, 在 webpack 5 中 HMR 已自动支持。无需配置。

node

• nvs 跨平台的node版本管理工具