建站
咨詢
售后
建站咨詢
新聞中心
Vite使用 esbuild 預(yù)構(gòu)建依賴。由于esbuild是一個(gè)用Go編寫的JavaScript(和TypeScript)綁定器，這也是它快速的原因之一。
??
通常，當(dāng)用React構(gòu)建一個(gè)新項(xiàng)目時(shí)，建議從create-react-app開(kāi)始。但現(xiàn)在有了Vite，就可以自己輕松地從頭創(chuàng)建一個(gè)新項(xiàng)目，因?yàn)閂ite的配置非常簡(jiǎn)單。
在我們開(kāi)始之前，需要安裝Node.js和NPM(與Node.js捆綁)(如果你還沒(méi)有安裝的話)。在本文中將使用NPM，但如果你喜歡Yarn或PNPM，請(qǐng)隨意使用。
打開(kāi)終端并創(chuàng)建一個(gè)新目錄：
mkdir react-vite-example
移動(dòng)到這個(gè)目錄中：
cd react-vite-example
初始化 npm 項(xiàng)目：
npm init -y
在運(yùn)行命令之后，應(yīng)該有個(gè)package.json文件在新創(chuàng)建的目錄中。
添加此項(xiàng)目所需的基本依賴項(xiàng):
npm install --save react react-dom
開(kāi)發(fā)依賴關(guān)系：
npm install --save-dev vite @vitejs/plugin-react-refresh
(@vitejs/plugin-react-refresh庫(kù)將用于啟用HMR，即熱模塊替換)
將以下行添加到package.json腳本中：
// /package.json
{
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
}
}
在項(xiàng)目根目錄新建一個(gè)文件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;
默認(rèn)情況下，Vite 會(huì)在你的項(xiàng)目根目錄尋找index.html文件。這樣便可以確定運(yùn)行應(yīng)用程序所需的依賴關(guān)系（JS文件，CSS文件，資產(chǎn)等）。
在項(xiàng)目的根目錄下創(chuàng)建index.html文件：
touch index.html
添加以下內(nèi)容：
你可以看到有一個(gè)對(duì)/src/index的引用。index.html中的JSX文件。這將是React應(yīng)用程序的JavaScript入口點(diǎn)。
創(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(Hello World!, document.getElementById("root"));
由于我們安裝的@vitejs/plugin-react-refresh模塊，現(xiàn)在你可以在React中創(chuàng)建應(yīng)用程序，并受益于Vite和HMR的速度。
使用npm run dev命令運(yùn)行帶有HMR的本地服務(wù)器。
使用npm run build構(gòu)建一個(gè)生產(chǎn)包，然后可以使用npm run serve來(lái)預(yù)覽它。
生產(chǎn)包將位于/dist目錄中，是需要部署到托管平臺(tái)(如Netlify或Vercel)上的包。
本文是非常基礎(chǔ)的，也沒(méi)有介紹如何使用 CSS 和資產(chǎn)，因?yàn)殚_(kāi)箱即用的 Vite 已經(jīng)支持 CSS 模塊（如果文件以 .module.css 結(jié)尾）和導(dǎo)入圖像等資產(chǎn)不需要額外的步驟。
本文標(biāo)題：如何在React中使用Vite構(gòu)建工具?
網(wǎng)站地址：http://www.dlmjj.cn/article/dppospc.html
