如何在 React 中使用 Vite 構(gòu)建工具?
譯文Vite使用 esbuild 預構(gòu)建依賴。由于esbuild是一個用Go編寫的JavaScript(和TypeScript)綁定器，這也是它快速的原因之一。
?
?
通常，當用React構(gòu)建一個新項目時，建議從create-react-app開始。但現(xiàn)在有了Vite，就可以自己輕松地從頭創(chuàng)建一個新項目，因為Vite的配置非常簡單。
在我們開始之前，需要安裝Node.js和NPM(與Node.js捆綁)(如果你還沒有安裝的話)。在本文中將使用NPM，但如果你喜歡Yarn或PNPM，請隨意使用。
打開終端并創(chuàng)建一個新目錄：
mkdir react-vite-example
移動到這個目錄中：
cd react-vite-example
初始化 npm 項目：
npm init -y
在運行命令之后，應(yīng)該有個package.json文件在新創(chuàng)建的目錄中。
添加此項目所需的基本依賴項:
npm install --save react react-dom
開發(fā)依賴關(guān)系：
npm install --save-dev vite @vitejs/plugin-react-refresh
(@vitejs/plugin-react-refresh庫將用于啟用HMR，即熱模塊替換)
將以下行添加到package.json腳本中：
// /package.json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
}
}
在項目根目錄新建一個文件vite.config.js：
touch vite.config.js
添加以下內(nèi)容：
// /vite.config.js
import reactRefresh from "@vitejs/plugin-react-refresh";
import vite from "vite";
const config = vite.defineConfig({
plugins: [reactRefresh()],
});
export default config;
默認情況下，Vite 會在你的項目根目錄尋找index.html文件。這樣便可以確定運行應(yīng)用程序所需的依賴關(guān)系（JS文件，CSS文件，資產(chǎn)等）。
在項目的根目錄下創(chuàng)建index.html文件：
touch index.html
添加以下內(nèi)容：
<!-- /index.html -->
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<div id="root"></div>
<script type="module" src="/src/index.jsx"></script>
</body>
</html>
你可以看到有一個對/src/index的引用。index.html中的JSX文件。這將是React應(yīng)用程序的JavaScript入口點。
創(chuàng)建/src目錄：
mkdir src
創(chuàng)建/src/index.jsx文件：
touch src/index.jsx
添加以下內(nèi)容：
import React from "react";
import { render } from "react-dom";
render(<div>Hello World!</div>, document.getElementById("root"));
由于我們安裝的@vitejs/plugin-react-refresh模塊，現(xiàn)在你可以在React中創(chuàng)建應(yīng)用程序，并受益于Vite和HMR的速度。
使用npm run dev命令運行帶有HMR的本地服務(wù)器。
使用npm run build構(gòu)建一個生產(chǎn)包，然后可以使用npm run serve來預覽它。
生產(chǎn)包將位于/dist目錄中，是需要部署到托管平臺(如Netlify或Vercel)上的包。
本文是非?；A(chǔ)的，也沒有介紹如何使用 CSS 和資產(chǎn)，因為開箱即用的 Vite 已經(jīng)支持 CSS 模塊（如果文件以 .module.css 結(jié)尾）和導入圖像等資產(chǎn)不需要額外的步驟。
