WEB前端业务开发好用的 npm、工具站点收藏

NPM 包

React DnD

• 描述： 用于 React 的拖放库，支持复杂的拖放交互。
• GitHub： react-dnd/react-dnd
• NPM： react-dnd

NanoID

• 描述： 生成短的唯一的字符串 ID。
• GitHub： ai/nanoid
• NPM： nanoid

Fuse.js

• 描述： 前端模糊搜索实现。
• GitHub： krisk/fuse
• NPM： fuse.js

React Spring

• 描述： 跨平台的弹簧物理效果动画库。
• NPM： react-spring

React Is

• 描述： 用于判断值是否是特定的 React 元素类型。
• NPM： react-is

Immer

• 描述： 通过简单且不可变的方式来更新 JavaScript 状态。
• GitHub： immerjs/immer
• NPM： immer

Framer Motion

• 描述： 一个用于 React 的生产级动画库。
• GitHub： framer/motion
• NPM： framer-motion

Date-fns

• 描述： 现代 JavaScript 日期实用工具库。
• GitHub： date-fns/date-fns
• NPM： date-fns

Zustand

• 描述： 一个小型、快速的 React 状态管理库。
• GitHub： pmndrs/zustand
• NPM： zustand

Zod

• 描述： TypeScript 的模式验证库。
• GitHub： colinhacks/zod
• NPM： zod

React Hook Form

• 描述： 简单、灵活的 React 表单库。
• GitHub： react-hook-form/react-hook-form
• NPM： react-hook-form

视觉资源

Font Awesome

• 描述： 提供大量矢量图标和社交媒体图标。
• 网站： fontawesome.com

Iconfont

• 描述： 阿里巴巴的图标库。
• 网站： iconfont.cn

Material Icons

• 描述： Google 的 Material Design 图标库，适用于各种平台。
• 网站： Material Icons

Feather Icons

• 描述： 轻量级、简单的开源图标库。
• GitHub： feathericons/feather
• 网站： feathericons.com

Heroicons

• 描述： Tailwind Labs 提供的免费 SVG 图标库。
• GitHub： tailwindlabs/heroicons
• 网站： heroicons.com

Bootstrap Icons

• 描述： Bootstrap 官方提供的图标库。
• GitHub： twbs/icons
• 网站： icons.getbootstrap.com

Remix Icon

• 描述： 开源的设计图标库，提供多种风格的图标。
• GitHub： Remix-Design/RemixIcon
• 网站： remixicon.com

LottieFiles

• 描述： Lottie 动画资源。
• 网站： lottiefiles.com

网站和工具

Apifox

• 描述： 接口调试工具，比 postman 好用一点。
• 网站： apifox.com

Lighthouse

• 描述： 一个开源的自动化工具，用于提高 Web 应用质量。
• 网站： Lighthouse

Uiverse

• 描述： UI 组件库大全。
• 网站： uiverse.io

Radix-ui

• 描述： 简单配置少的基础组件。
• 网站： radix-ui.com

Bundlephobia

• 描述： 一个在线工具，可以帮助你查看 npm 包的大小、下载时间和依赖关系，帮助开发者在选择库时做出更明智的决策。
• 网站： bundlephobia.com

Excalidraw

• 描述： 简单的在线白板工具，用于创建手绘风格的流程图和图表。
• 网站： excalidraw.com

Notion

• 描述： 集笔记、任务管理、知识库于一体的多功能生产力工具。
• 网站： notion.so

语雀

• 描述： 阿里巴巴推出的在线文档和知识管理工具，适用于团队协作。
• 网站： yuque.com

SwitchHost

• 描述： 用于切换和管理 hosts 文件的工具。
• 网站： oldj.github.io/SwitchHosts

Snipaste

• 描述： 简单易用的截图工具，可快速贴图到屏幕。
• 网站： snipaste.com

Warp

• 描述： 一款现代化的终端工具，支持团队协作和快速开发。
• 网站： warp.dev

图片占位网站

• 描述： 提供各种尺寸和风格的占位图片，开发时无图片可以拿来占位。
• 网站： fakeimg.pl

浏览器插件

SwitchyOmega

• 描述： 切换代理。
• 网站： chrome.google.com/webstore

FeHelper

• 描述： 前端开发助手。
• 网站： fehelper.com

Postwomen

• 描述： 快速测试 API 的浏览器插件，类似于 Postman。
• 网站： postwomen.com