建站
咨詢
售后
建站咨詢
新聞中心
Vite使用 esbuild 預構建依賴。由于esbuild是一個用Go編寫的JavaScript(和TypeScript)綁定器，這也是它快速的原因之一。
??
通常，當用React構建一個新項目時，建議從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
在運行命令之后，應該有個package.json文件在新創(chuàng)建的目錄中。
添加此項目所需的基本依賴項:
npm install --save react react-dom
開發(fā)依賴關系：
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
添加以下內容：
// /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文件。這樣便可以確定運行應用程序所需的依賴關系（JS文件，CSS文件，資產(chǎn)等）。
在項目的根目錄下創(chuàng)建index.html文件：
touch index.html
添加以下內容：
你可以看到有一個對/src/index的引用。index.html中的JSX文件。這將是React應用程序的JavaScript入口點。
創(chuàng)建/src目錄：
mkdir src
創(chuàng)建/src/index.jsx文件：
touch src/index.jsx
添加以下內容：
import React from "react";
import { render } from "react-dom";
render(Hello World!, document.getElementById("root"));
由于我們安裝的@vitejs/plugin-react-refresh模塊，現(xiàn)在你可以在React中創(chuàng)建應用程序，并受益于Vite和HMR的速度。
使用npm run dev命令運行帶有HMR的本地服務器。
使用npm run build構建一個生產(chǎn)包，然后可以使用npm run serve來預覽它。
生產(chǎn)包將位于/dist目錄中，是需要部署到托管平臺(如Netlify或Vercel)上的包。
本文是非?；A的，也沒有介紹如何使用 CSS 和資產(chǎn)，因為開箱即用的 Vite 已經(jīng)支持 CSS 模塊（如果文件以 .module.css 結尾）和導入圖像等資產(chǎn)不需要額外的步驟。
文章題目：如何在React中使用Vite構建工具?
標題來源：http://m.5511xx.com/article/dppospc.html
