了解 React 项目中的 Vite 流程和结构

使用 react 时，vite 提供了简化的开发体验，与传统的 create react app 设置有一些关键区别。本博文将探讨一个典型的 vite 项目的结构，重点关注 index.html、main.jsx 和 app.jsx 等关键文件。

1.index.html

在 vite 支持的 react 应用程序中，index.html 是一个关键的起点。与 create react app 自动注入脚本不同，vite 要求您直接指定脚本文件。这种显式包含简化了对应用程序的入口点和依赖项的理解。

  
    <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>vite + react</title><div id="root"></div>
    <!-- the root div where your react app will be mounted -->
    <script type="module" src="/src/main.jsx"></script><!-- the script tag importing your main javascript module -->

在这个例子中，可以看到script标签直接加载了main.jsx。这种直接包含是与 create react app 的主要区别，增强了对项目入口点的清晰度和控制。

1.1 依赖关系

为了确保您的脚本文件正确加载，vite 利用现代 es 模块导入。确保您的 package.json 包含必要的依赖项：

"dependencies": {
  "react": "^18.2.0",
  "react-dom": "^18.2.0"
}

在 html 文件中显式包含脚本可确保应用程序的正确加载和执行顺序，从而减轻脚本加载的潜在问题。

2.main.jsx

main.jsx 文件充当 react 应用程序的入口点。该文件负责将根组件渲染到 dom 中。它通常是在您的index.html中脚本标签的src属性中指定的文件。

import react from 'react';
import reactdom from 'react-dom/client';
import app from './app.jsx';
import './index.<a style="color:#f60; text-decoration:underline;" href="https://www.codesou.cn/" target="_blank">css</a>';

// render the root component into the root element in the html
reactdom.createroot(document.getelementbyid('root')).render(
  <react.strictmode><app></app></react.strictmode>
);

在这个文件中，reactdom.createroot 用于将 app 组件渲染到 id root 的 html 元素中。这种直接渲染方法，无需临时保留任何根元素，简化了流程，清楚地表明应用程序从哪里启动以及涉及哪些组件。

3.应用程序.jsx

app.jsx 文件包含主 app 组件的定义。该组件作为 react 组件树的根。

import react from 'react';

const app = () => {
  return (
    <div classname="app">
      <h1>hello, vite and react!</h1>
    </div>
  );
};

export default app;

在此文件中，您定义应用程序的主要结构和行为。 app 组件是您构建主要 ui 和功能的地方，就像在任何其他 react 项目中一样。

附加材料和最佳实践

4. 将 tailwind css 与 vite 结合使用

tailwind css 可以轻松集成到 vite 项目中，实现实用优先的样式。

1. 安装 tailwind css：

npm install -d tailwindcss postcss autoprefixer
npx tailwindcss init -p

1. 配置 tailwind：

使用项目的特定路径更新 tailwind.config.js ：

module.exports = {
  content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
  theme: {
    extend: {},
  },
  plugins: [],
};

1. 在 css 中包含 tailwind：

更新index.css以包含tailwind的基础、组件和实用程序：

@tailwind base;
@tailwind components;
@tailwind utilities;

5. 模块热更换（hmr）

vite 提供开箱即用的 hmr，让您无需刷新页面即可实时看到变化。

6. 环境变量

vite 使用 .env 文件来管理环境变量。在项目的根目录创建一个 .env 文件并定义变量：

vite_api_url=https://api.example.com

使用 import.meta.env 在应用程序中访问这些变量：

const apiUrl = import.meta.env.VITE_API_URL;

7. 优化构建流程

vite 的构建命令（vite build）在底层使用 rollup 来生成高度优化的静态资产以用于生产。这确保您的应用程序快速高效。

结论

在 react 项目中使用 vite 可以提供精简高效的开发体验。了解 index.html、main.jsx 和 app.jsx 等关键文件的流程和结构可以显着增强您的开发过程。凭借 tailwind css 集成、hmr 和优化构建的额外优势，vite 成为 react 开发人员的现代、强大工具。

通过利用这些功能和最佳实践，您可以轻松创建高性能、可扩展且可维护的应用程序。