如何在 React 中使用 Vite 构建工具?

Vite是一个新的前端应用构建工具(由Vue.js的创建者Evan you创建)。它的工作原理很像Webpack和Parcel，但速度更快。
Vite使用 esbuild 预构建依赖。由于esbuild是一个用Go编写的JavaScript(和TypeScript)绑定器，这也是它快速的原因之一。
通常，当用React构建一个新项目时，建议从create-react-app开始。但现在有了Vite，就可以自己轻松地从头创建一个新项目，因为Vite的配置非常简单。
在我们开始之前，需要安装Node.js和NPM(与Node.js捆绑)(如果你还没有安装的话)。在本文中将使用NPM，但如果你喜欢Yarn或PNPM，请随意使用。
打开终端并创建一个新目录：

  1. mkdir react-vite-example

移动到这个目录中：

  1. cd react-vite-example

初始化 npm 项目：

  1. npm init -y

在运行命令之后，应该有个package.json文件在新创建的目录中。
添加此项目所需的基本依赖项:

  1. npm install --save react react-dom

开发依赖关系：

  1. npm install --save-dev vite @vitejs/plugin-react-refresh

(@vitejs/plugin-react-refresh库将用于启用HMR，即热模块替换)
将以下行添加到package.json脚本中：

  1. // /package.json
  2. {
  3.   "scripts": {
  4.     "dev": "vite",
  5.     "build": "vite build",
  6.     "serve": "vite preview"
  7.   }
  8. }

在项目根目录新建一个文件vite.config.js：

  1. touch vite.config.js

添加以下内容：

  1. // /vite.config.js
  2. import reactRefresh from "@vitejs/plugin-react-refresh";
  3. import vite from "vite";
  5. const config = vite.defineConfig({
  6.   plugins: [reactRefresh()],
  7. });
  9. export default config;

默认情况下，Vite 会在你的项目根目录寻找index.html文件。这样便可以确定运行应用程序所需的依赖关系（JS文件，CSS文件，资产等）。
在项目的根目录下创建index.html文件：

  1. touch index.html

添加以下内容：

  1. <!-- /index.html -->
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.   </head>
  7.   <body>
  8.     <div id="root"></div>
  9.     <script type="module" src="/src/index.jsx"></script>
  10.   </body>
  11. </html>

你可以看到有一个对/src/index的引用。index.html中的JSX文件。这将是React应用程序的JavaScript入口点。
创建/src目录：

  1. mkdir src

创建/src/index.jsx文件：

  1. touch src/index.jsx

添加以下内容：

  1. import React from "react";
  2. import { render } from "react-dom";
  4. render(<div>Hello World!</div>, document.getElementById("root"));

由于我们安装的@vitejs/plugin-react-refresh模块，现在你可以在React中创建应用程序，并受益于Vite和HMR的速度。
使用npm run dev命令运行带有HMR的本地服务器。
使用npm run build构建一个生产包，然后可以使用npm run serve来预览它。
生产包将位于/dist目录中，是需要部署到托管平台(如Netlify或Vercel)上的包。
本文是非常基础的，也没有介绍如何使用 CSS 和资产，因为开箱即用的 Vite 已经支持 CSS 模块（如果文件以 .module.css 结尾）和导入图像等资产不需要额外的步骤。