vite官方模板大解释

luca没有bug
633 阅读12分钟

image.png

在官网看到社区模板好奇点进去,发现还是不太明白前端工程化

社区模板

image.png 所以这些模板都在用什么技术,一一解释一下

  • Vitamin - React TypeScript, TailwindCSS, SPA + PWA, Cypress and CI.
  1. TailwindCSS: TailwindCSS 是一个实用优先的 CSS 框架，它提供了一系列预定义的样式类，可以通过组合这些类来快速构建页面样式，简化了样式开发的过程。
  2. SPA + PWA: 这个项目模板是一个单页面应用程序（SPA），意味着整个应用只有一个 HTML 页面，并使用 JavaScript 动态地加载内容，提供更快的用户体验。同时，它还支持渐进式 Web 应用程序（PWA）功能，允许将 Web 应用程序以类似于原生应用程序的方式进行缓存和离线访问。
  3. Cypress: Cypress 是一个前端端到端测试框架，用于编写和运行端到端测试，用于模拟用户与应用程序进行交互，以确保应用程序在不同场景下的正常运行。
  4. CI (Continuous Integration) : 连续集成是一种软件开发实践，它涉及多次将代码集成到主线分支，并自动运行测试和构建过程，以确保代码质量。在这个项目模板中，可能已经配置了 CI 工具，如 GitHub Actions 或者 GitLab CI，以实现自动化的持续集成。
  1. ESlint: ESlint 是一个用于静态代码分析的工具，它帮助开发者检测并修复代码中的潜在问题，保持代码风格一致性，并遵循规范和最佳实践。
  2. Prettier: Prettier 是一个代码格式化工具，它可以自动格式化代码，使代码风格保持一致，提高代码的可读性。
  3. Pre-commit 钩子: Pre-commit 钩子是在代码提交前自动运行的脚本，用于执行代码检查、格式化等任务，以确保提交的代码质量。
  • react-vite-admin - React, Recoil, React Query, React Hooks, TypeScript, Axios
  1. Recoil: Recoil 是 Facebook 开发的状态管理库，用于更轻松地管理 React 应用程序的状态。它提供原子状态和选择器，以及其他工具，用于有效地处理组件之间的状态共享和数据派生。
  2. React Query: React Query 是一个用于数据获取和缓存的库。在后台管理系统中，它可以方便地管理异步数据请求，并提供数据缓存和自动数据更新的功能，以确保数据的及时性。
  1. ReScript: ReScript（前身为 BuckleScript）是一种将 ReScript 代码编译成高效、可预测的 JavaScript 的语言。它提供了一种现代化、类型安全且易于理解的语法，可以帮助开发者更轻松地编写高质量的前端代码。
  1. Vitest: Vitest 是一个用于运行测试的工具，它支持在 Vite.js 环境中运行测试，并提供了一些有用的测试工具和断言库。
  2. Testing Library: Testing Library 是一个用于编写测试的工具库，它提供了一套简单的 API，用于编写可读性高、健壮性强的测试。
  3. TailwindCSS 3: TailwindCSS 是一个实用优先的 CSS 框架，它提供了一系列预定义的样式类，可以通过组合这些类来快速构建页面样式，简化了样式开发的过程。在这个项目模板中，使用了最新的 TailwindCSS 3 版本。
  1. Storybook: Storybook 是一个用于开发、测试和展示 React 组件的工具。它提供了一个独立的环境，用于快速查看和交互式开发组件，便于组件的调试和演示。
  2. MDX: MDX 是一种将 Markdown 与 JSX 结合的语法，允许在 Markdown 文件中嵌入 JSX 组件。在 Tropical 项目中，MDX 可能用于编写可交互的文档和演示，让文档更加生动和具有交互性。
  3. Fela: Fela 是一个 CSS-in-JS 库，它允许将 CSS 代码编写为 JavaScript 对象。这样可以更好地组织和管理组件的样式，并在运行时将样式动态注入到页面中。
  4. SSR prerendering: SSR（服务器端渲染）预渲染是一种技术，它在服务器上预先渲染页面的部分或全部内容，然后将其发送到客户端，以提供更快的首次加载速度和更好的 SEO（搜索引擎优化）效果。
  5. Islands architecture: "Islands" 架构是一种前端架构模式，它将前端应用程序拆分为多个自治的 "islands"，每个 "island" 是一个独立的子应用程序，可以独立开发、测试和部署。这种架构模式有助于提高应用程序的可维护性和可扩展性。
    "Tropical" 是一个综合了 React、Storybook、MDX、Fela、SSR 预渲染和 Islands 架构等工具和技术的项目。它提供了现代化的开发基础，使得开发者可以更高效地构建 Web 应用程序，并通过 SSR 预渲染提供更好的用户体验和 SEO 效果。同时，使用 Storybook 和 MDX 可以方便地开发和展示 React 组件，而 Fela 则有助于更好地管理组件的样式。最后，Islands 架构可以使得项目更易于维护和扩展。
  1. @vitejs/plugin-react-refresh 是 Vite 官方提供的一个插件，用于在开发过程中提供 React 组件的热模块替换（Hot Module Replacement，HMR）功能。HMR 允许在不刷新整个页面的情况下，仅重新加载发生更改的组件，从而加快开发过程的反馈速度。 而 vite-plugin-react-refresh 正是对 @vitejs/plugin-react-refresh 的增强版本，它提供了一些额外的功能，进一步提高了 React 组件在开发过程中的开发体验。
  1. Chakra UI: Chakra UI 是一个现代化的 UI 组件库，它提供了一套丰富的可定制的 UI 组件，可以帮助开发者快速构建漂亮的用户界面。
  2. Jest: Jest 是一个用于编写测试的 JavaScript 测试框架，它提供了一套简单的 API，用于编写可读性高、健壮性强的测试。
  3. Husky: Husky 是一个 Git 钩子工具，它允许在 Git 操作前执行预定义的脚本，用于在代码提交前运行测试、代码检查等任务，以保证代码质量。
  4. Cypress: Cypress 是一个前端端到端测试框架，用于编写和运行端到端测试，用于模拟用户与应用程序进行交互，以确保应用程序在不同场景下的正常运行。
  1. PostCSS: PostCSS 是一个用于转换 CSS 的工具，它可以让你使用新的 CSS 语法和功能，然后将其转换为浏览器可识别的 CSS。
  2. pnpm: pnpm 是一个快速、瘦身且零安装的 Node 包管理器。它可以加快依赖安装速度，并节省磁盘空间。
  1. Firebase (v9) : Firebase 是一个由 Google 提供的后端即服务（Backend-as-a-Service，BaaS）平台，它提供了一系列云服务，如实时数据库、身份认证、存储、托管等，用于构建现代 Web 和移动应用程序。
  • vital - React, TypeScript, Tailwind (JIT), CSS-Modules, Jest, Atomic Design, Prettier, Husky, Commit-lint.
  1. Atomic Design: Atomic Design 是一种前端设计模式，它将 UI 组件划分为原子（Atoms）、分子（Molecules）、有机体（Organisms）、模板（Templates）和页面（Pages）等不同层级，以便更好地组织和构建可复用的组件。
  • vite-react-starter - React + ESLint + Prettier + SASS + Emotion + TailwindCSS + Jest + Testing Library.
  1. Emotion: Emotion 是一个 CSS-in-JS 库，它允许将 CSS 样式写在 JavaScript 中，以组件化的方式来管理样式。
  1. GitHub Actions: GitHub Actions 是 GitHub 提供的持续集成和持续部署工具，它可以帮助自动化构建、测试和部署流程，提高开发效率。
  2. Chrome Extension Manifest v3: Chrome Extension Manifest v3 是 Chrome 扩展的新版清单格式，它引入了一些改进和更严格的权限控制，提高了扩展的安全性和性能。
  1. ProComponents: ProComponents 是一个由 Ant Design 团队开发的高级组件库，它是 antd 的扩展，提供了更多的高级和复杂的组件，适用于构建企业级的管理系统。
  • React-PWA - React v18, TypeScript, Vite, React Router v6, MUI v5, Recoil, PWA, Eslint, Prettier, Husky, lint-staged, https localhost and more.
  1. MUI v5: MUI v5（Material-UI v5）是一个基于 Material Design 的 React UI 组件库，它提供了一套丰富的 UI 组件，使得构建漂亮的用户界面变得更加简单和高效。
  2. Recoil: Recoil 是一个由 Facebook 提供的状态管理库，它用于管理应用程序的全局状态，提供了一套简单且灵活的 API，用于处理组件之间的状态共享和更新。
  3. PWA: PWA（渐进式 Web 应用程序）是一种新型的 Web 应用程序技术，它通过使用现代 Web 平台的功能，如 Service Worker 和 Web App Manifest，使得 Web 应用程序具备类似原生应用的离线访问、推送通知等功能。
  4. lint-staged: lint-staged 是一个用于在 Git 预提交阶段运行 linters 的工具，它可以在提交前自动运行 Eslint 和 Prettier 等工具进行代码检查和格式化。
  5. https localhost: "React-PWA" 模板支持在本地开发服务器中启用 HTTPS，以提供更安全和可信的开发环境。
  • Viact - React + TypeScript + ESLint + Prettier + Support RTL + mock REST API Viact + Storybook, ErrorBoundary, UnoCss and more.
  1. Support RTL: RTL（Right-to-Left）支持，是指支持从右向左的文本布局，用于适配某些阿拉伯语和希伯来语等从右向左书写的语言。
  2. Mock REST API: Mock REST API 是模拟的后端接口服务，用于在开发阶段模拟实际的后端请求和响应，方便前端开发和测试。
  3. Storybook: Storybook 是一个用于构建组件库和交互式组件展示页面的开发环境，它提供了一套交互式的界面，用于快速开发和测试组件。
  4. ErrorBoundary: ErrorBoundary 是 React 的错误处理机制，用于捕获组件渲染过程中发生的错误，防止错误影响整个应用程序的渲染。
  5. UnoCss: UnoCss 是一个 CSS 库，它提供了一些实用的样式和组件，用于快速构建页面样式和布局。
  • Viterts - React + TypeScript + Redux + React Router + Jest + ESLint + Airbnb + Prettier + SASS.
  1. Airbnb: Airbnb 是一个流行的 ESLint 配置，它提供了一套严格的代码规范，用于保持代码风格一致性和可读性。
  • ViteRC - React 18 + TypeScript + ESLint (Airbnb) + Prettier + Husky + Jest + Absolute imports + Commit linting.
  1. Absolute imports: 绝对路径导入，允许你在项目中使用绝对路径引入模块，避免使用相对路径的繁琐和不稳定。
  2. Commit linting: Commit linting 是用于校验 Git 提交信息的工具，它可以帮助你保持提交信息的一致性和规范性。
  • VRTTV - React + TypeScript + TailwindCSS + ESLint + Prettier + Husky + Conventional Commits + Gitmoji + GitHub Actions + Vercel Deploy.
  1. Conventional Commits: Conventional Commits 是一种代码提交信息的约定规范，它定义了一套标准的提交信息格式，用于提供更具意义和易读的提交历史。
  2. Gitmoji: Gitmoji 是一种使用 Emoji 表情符号来表示提交类型的约定规范，使得提交信息更加生动有趣，同时提供了可视化的提交历史。
  3. GitHub Actions: GitHub Actions 是 GitHub 提供的持续集成和持续部署工具，它可以帮助自动化构建、测试和部署流程，提高开发效率。
  4. Vercel Deploy: Vercel 是一个服务器less 部署平台，它可以帮助你快速将应用程序部署到云端，提供高性能的托管和全球 CDN。
  • vite-mern-template - React 18 + TypeScript + Vite + Redux Toolkit + ESLint + React Router DOM + Axios + React Icons + React Toastify + Express + Mongoose.
  1. React Icons: React Icons 是一个用于引入 SVG 图标的 React 组件库，它提供了一套常用的图标组件，使得在应用程序中使用图标更加简单和方便。
  2. React Toastify: React Toastify 是一个用于显示通知消息的 React 组件库，它提供了一套自定义的弹出通知组件，用于向用户展示提示、警告和成功等消息。
  3. Express: Express 是一个基于 Node.js 的 Web 框架，用于构建后端服务器和 RESTful API。
  4. Mongoose: Mongoose 是一个用于操作 MongoDB 数据库的 Node.js ODM（Object Data Modeling）库，它提供了一套便捷的 API，用于定义数据模型和执行数据库操作。
  • react-xs-admin - The background management system template developed based on React18 + ReactRouteV6 + Vite + And Design + ReactIntl + ReactRedux + Emulation.
  1. React Intl: React Intl 是一个用于国际化和本地化的 React 库，它提供了一套用于处理多语言和地区化的组件和API。
  2. React Redux: React Redux 是一个用于状态管理的 React 绑定库，它与 Redux 配合使用，帮助管理复杂的应用程序状态。
  3. Emotion: Emotion 是一个用于处理样式的 JavaScript 库，它提供了一套用于写 CSS-in-JS 样式的 API，使得样式表编写更加灵活和易于维护。
  • vite-mui-ts - React + TypeScript + Redux + Material UI + RRD + ESLint + Prettier.
  1. Material UI: Material UI 是一个流行的 React UI 组件库，它实现了谷歌的 Material Design 规范，提供了一套美观、现代化的UI组件，用于构建漂亮的用户界面。
  2. RRD (React Router DOM) : React Router DOM 是 React 官方提供的用于页面导航的库，它支持声明式的路由配置和导航控制，用于构建单页应用程序（SPA
avatar
文章
阅读
粉丝