使用 React 時，Vite 提供了簡化的開發體驗，與傳統的 Create React App 設定有一些關鍵區別。本部落格文章將探討一個典型的 Vite 專案的結構，重點在於 index.html、main.jsx、App.jsx 等關鍵檔案。
在 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>
在這個範例中，你可以看到腳本標籤直接載入main.jsx。這種直接包含是與 Create React App 的主要區別，增強了對專案入口點的清晰度和控制。
為了確保您的腳本檔案正確加載，Vite 利用現代 ES 模組導入。確保您的 package.json 包含必要的依賴：
"dependencies": {
"react": "^18.2.0",
"react-dom": "^18.2.0"
}
在 HTML 檔案中明確包含腳本可確保應用程式的正確載入和執行順序，從而減輕腳本載入的潛在問題。
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 元素中。這種直接渲染方法，無需臨時保留任何根元素，簡化了流程，清楚地表明應用程式從哪裡啟動以及涉及哪些元件。
App.jsx 檔案包含主應用程式元件的定義。該元件充當 React 元件樹的根。
import React from 'react';
const App = () => {
return (
<div className="App">
<h1>Hello, Vite and React!</h1>
</div>
);
};
export default App;
在此文件中，您定義應用程式的主要結構和行為。 App 元件是您建立主要 UI 和功能的地方，就像在任何其他 React 專案中一樣。
Tailwind CSS 可以輕鬆整合到 Vite 專案中，實現實用優先的樣式。
npm install -D tailwindcss postcss autoprefixer npx tailwindcss init -p
使用專案的特定路徑更新 tailwind.config.js：
module.exports = {
content: ['./index.html', './src/**/*.{js,jsx,ts,tsx}'],
theme: {
extend: {},
},
plugins: [],
};
更新index.css以包含Tailwind的基礎、元件和實用程式：
@tailwind base; @tailwind components; @tailwind utilities;
Vite 提供開箱即用的 HMR，讓您無需刷新頁面即可即時看到變化。
Vite 使用 .env 檔案來管理環境變數。在專案的根目錄中建立一個 .env 檔案並定義變數：
VITE_API_URL=https://api.example.com
使用 import.meta.env 在應用程式中存取這些變數：
const apiUrl = import.meta.env.VITE_API_URL;
Vite 的建置命令（vite build）在底層使用 Rollup 來產生高度最佳化的靜態資產以用於生產。這可確保您的應用程式快速且有效率。
在 React 專案中使用 Vite 可以提供精簡且有效率的開發體驗。了解 index.html、main.jsx 和 App.jsx 等關鍵檔案的流程和結構可以顯著增強您的開發過程。憑藉 Tailwind CSS 整合、HMR 和優化建置的額外優勢，Vite 成為 React 開發人員的現代、強大工具。
透過利用這些功能和最佳實踐，您可以輕鬆建立高效能、可擴展且可維護的應用程式。
以上是了解 React 專案中的 Vite 流程和結構的詳細內容。更多資訊請關注PHP中文網其他相關文章！
