使用 react 时，vite 提供了简化的开发体验，与传统的 create react app 设置有一些关键区别。本博文将探讨一个典型的 vite 项目的结构，重点关注 index.html、main.jsx 和 app.jsx 等关键文件。
1.index.html
在 vite 支持的 react 应用程序中，index.html 是一个关键的起点。与 create react app 自动注入脚本不同，vite 要求您直接指定脚本文件。这种显式包含简化了对应用程序的入口点和依赖项的理解。
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>vite + react</title>
</head>
<body>
<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 -->
</body>
</html>
在这个例子中，可以看到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.css';
// render the root component into the root element in the html
reactdom.createroot(document.getelementbyid('root')).render(
<react.strictmode>
<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 项目中，实现实用优先的样式。
- 安装 tailwind css：
npm install -d tailwindcss postcss autoprefixer npx tailwindcss init -p
- 配置 tailwind：
使用项目的特定路径更新 tailwind.config.js ：
module.exports = {
content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
- 在 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 开发人员的现代、强大工具。
通过利用这些功能和最佳实践，您可以轻松创建高性能、可扩展且可维护的应用程序。
