当前位置: 首页 > news >正文

个人学习——前端react项目框架

  1. 文件作用
    package.json
    npm脚本部分"scripts"
    项目启动与打包

"dev": "vite"
启动 开发环境,开启本地服务器,支持热更新。
用法:npm run dev

"build": "tsc && vite build --base=/"
先运行 TypeScript 编译 (tsc),再用 Vite 打包项目生成生产环境文件。
用法:npm run build

"preview": "vite preview"
本地预览打包后的生产环境效果,通常在 build 之后使用。
用法:npm run preview

测试相关

"test": "vitest"
运行 单元测试,Vitest 是 Vite 推荐的测试工具。
用法:npm run test

"test-e2e": "pm2 start "yarn run-mock-server" --name server && yarn playwright test"
运行 端到端测试(E2E):

用 pm2 启动一个 mock server(模拟后端接口)。

用 Playwright 运行测试脚本。
用法:npm run test-e2e

代码质量与类型检查

"lint": "eslint src --ignore-path .gitignore"
使用 ESLint 检查 src 目录下代码的规范和风格。

"check-types": "tsc --project tsconfig.json --pretty --noEmit"
用 TypeScript 检查类型错误,但不生成文件(--noEmit)。

工具与生成

"prepare": "husky"
配置 Husky,通常用于 Git 钩子(比如提交前自动 lint 或测试)。

"generate": "plop"
运行 Plop,用于 代码模板生成(比如快速生成组件或页面模板)。

Storybook 相关

"storybook": "storybook dev -p 6006"
启动 Storybook 本地开发环境,用于组件展示与开发。

"build-storybook": "storybook build"
打包 Storybook,为上线或共享准备静态页面。

Mock Server

"run-mock-server": "vite-node mock-server.ts | pino-pretty -c"
启动本地 mock server(用 Vite Node 运行 mock-server.ts),并用 pino-pretty 格式化日志。

依赖dependencies

  1. 核心框架

react / react-dom

React 核心库和 DOM 渲染库,必须依赖。

@vitejs/plugin-react

Vite 项目中支持 React 的插件,处理 JSX/TSX 和热更新。

  1. 状态管理

zustand

轻量状态管理库,用于全局状态存储。

@tanstack/react-query

数据请求与缓存管理库,优化网络请求与状态同步。

@tanstack/react-query-devtools

React Query 调试工具,帮助查看请求状态。

  1. 路由

react-router

React 官方路由库,用于单页应用的页面跳转与路由管理。

  1. UI 组件和样式工具

@radix-ui/react-* 系列

高可访问性的 UI 组件,如 Dialog、Dropdown、Switch、Label 等。

clsx

用于条件组合 className,常和 Tailwind CSS 一起使用。

tailwind-merge / tailwindcss-animate

Tailwind CSS 工具,优化类名合并与动画效果。

lucide-react

React 图标库。

  1. 表单和验证

react-hook-form

高性能表单库,易于验证和收集表单数据。

@hookform/resolvers

配合 zod 或 yup 进行表单验证。

zod

类型安全的验证库,用于表单或接口数据校验。

  1. HTTP 请求与工具

axios

HTTP 请求库,用于与后端接口通信。

dayjs

轻量日期处理库,类似 moment.js。

dompurify

安全处理 HTML,防止 XSS 注入。

nanoid

生成唯一 ID 的库。

marked

Markdown 解析为 HTML。

  1. 错误处理与优化

react-error-boundary

捕获 React 组件渲染中的错误,防止整个页面崩溃。

react-helmet-async

动态设置页面 meta 标签、标题等。

  1. 开发工具(devDependencies)

vite / typescript / eslint / prettier

构建、类型检查、代码规范、格式化。

vitest / playwright / @testing-library/react

单元测试与端到端测试。

storybook / plop

UI 组件开发与代码生成模板。

husky / lint-staged

Git 钩子,保证提交前代码质量。

开发阶段需要的依赖dev-dependencies

常见示例
类别 包 作用
构建工具 vite, webpack 编译、打包、热更新
类型检查 typescript TypeScript 类型检查
代码规范 eslint, prettier 检查和格式化代码
测试工具 vitest, jest, playwright 单元测试、端到端测试
组件开发 storybook, plop UI 组件展示或代码生成
Git 钩子 husky, lint-staged 提交前自动检查或格式化代码

http://www.hskmm.com/?act=detail&tid=18867

相关文章:

  • 软件基础第一次作业
  • LGP9755 [CSP-S 2023] 种树 学习笔记
  • 7、revision 是 Maven 3.5+ 引入的现代版本管理机制 - 实践
  • P1731 生日蛋糕 做题记录
  • 如何有效提升代码覆盖率:从单元测试到集成测试的实践指南
  • Spring知识点(2)
  • 超越实习期的AI自动化工具:播客工作流与Slack导出器实战
  • 调度器的各项指标以及计算方式
  • 浅谈dsu on tree
  • JavaDay10
  • 昇腾多机推理极速上手:10倍简化的 DeepSeek R1 超大规模模型部署
  • python开始exe应用程序初级教程
  • B站油管抖音一键笔记
  • 介绍自己
  • pycharm更换国内源
  • 基于Python+Vue开发的反诈视频宣传管理系统源码+运行步骤
  • 0voice-2.2.1-服务器百万并发实现
  • 微服务去掉认证的功能
  • INNER JOIN LEFT JOIN, RIGHT JOIN, FULL OUTER JOIN
  • 进程调度的时机,切换与过程
  • 深入解析:六维力传感器材质选择:影响性能与精度的关键因素
  • 按键精灵安卓/ios辅助工具,脚本开发新手教程ui界面介绍 - 教程
  • P3197fwx - FanWenxuan
  • 2025年AI大模型赋能智能座舱研究报告:技术、资本与市场|附20+份报告PDF、数据仪表盘汇总下载
  • 专题:2025年AI Agent智能体行业洞察报告|附110+份报告PDF、数据仪表盘汇总下载
  • 开启我的Java旅程
  • MYSQL: 时间戳演示
  • 自动化测试用例结构分析
  • 谷歌新款具身智能模型 Gemini Robotics 1.5 和 Gemini Robotics-ER 1.5
  • 完整教程:测试自动化教程:Parasoft如何流重定向与单元测试自动化