历史搜索

如何用Vite构建React项目

游客2024-08-20 15:03:02
目录文章目录
  1. 为什么用 Vite?
  2. 兼容性说明
  3. 分步指南(React+Vite)

为什么用 Vite?

Vite 是现代 web 项目的快速开发工具。

它通过改进开发体验来关注速度和性能。

Vite 具有快速冷启动、按需编译、模块热更新的特点。

兼容性说明

Vite 需要 Node.js 18+版本。20+. 然而,有些模板需要更高的 Node.js 版本才能工作,如果您的包管理器对此发出警告,请升级。

分步指南(React+Vite)

React 用 Vite 是构建快速高效 web 应用程序的强大组合。Vite 是一个专注于速度和开发经验的构建工具,利用 ES 模块实现更快的构建。以下是关于如何使用 Vite 建立 React 项目的基本指南:

1. 创建一个新的 React 项目

也可以通过其他命令行选项直接指定项目名称和要使用的模板。例如,要构建 Vite+Rreact 项目,请运行:

npm create vite@latest

下一步:

如何用Vite构建React项目 1

2.安装 Vite

安装了 React 项目,接着到项目目录并安装 Vite:

npm install

为 React 配置 Vite:Vite 内置了对 React 的支持,因此基本使用不需要任何额外的配置。但是,如果需要,您可以在项目根目录中使用 vite.config.js 文件进行自定义配置。

vite.config.js:

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
})

修改 package.json 脚本:更新 package.json 文件中的 scripts 部分,以使用 Vite 进行开发。

package.json:

{
  "name": "react-vite",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview"
  },
  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.55",
    "@types/react-dom": "^18.2.19",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.56.0",
    "eslint-plugin-react": "^7.33.2",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.5",
    "vite": "^5.1.0"
  }
}

移动 React 入口文件(可选)

默认情况下,Vite 希望应用程序的入口点是 index.html。如果您的 React 项目的入口点是 index.js 或其他什么,您可能需要将其移动到 index.html。或者,您可以将 Vite 配置为使用不同的入口点。

启动开发服务

现在,您可以通过运行 Vite 启动开发服务器:

npm run dev

这将启动本地开发服务器,启用热模块替换(HMR)以实现快速开发。

构建项目:当您准备好为生产构建项目时,您可以运行:

npm run build

这将在 dist 目录中生成 React 应用程序的优化生产构建。

有了这些步骤,您应该已经使用 Vite 建立了一个基本的 React 项目,为开发和生产部署做好准备。

您可以查看 Vite 文档以了解更高级的配置和优化(链接)。

标签:React