vite - 技术栈

学习如何使用 Vite 进行 Web 应用的设置、配置和优化。Vite 是一个快速高效的构建工具，支持热模块替换（HMR）和插件扩展。

使用 Vite 入门

在本文中，我们将使用 Vite 来打包一个已有的 Web 应用。如果你的项目包含大量模块，Vite 可能是适合你的构建工具，因为它通过预打包依赖项来实现超快的文件打包速度。

Vite 使项目初始化变得简单，它提供了适用于不同技术栈的模板，如原生 JavaScript（JS）、Vue、React、Preact、Svelte 和 TypeScript。此外，Vite 还内置了热模块替换（HMR） ，当使用 create-vite 创建项目时，会自动配置 HMR。此外，Vite 的功能可以通过插件轻松扩展。

你可以使用自己的项目进行操作，或者下载这个用于图片轮播的 React 应用。

项目设置

如果你使用自己的项目进行操作，请确保该项目是一个 Node.js 项目。你可以使用以下命令初始化 Node.js 项目：

bash 复制代码

npm init -y

如果你使用的是提供的 React 应用，该项目已经是一个 Node.js 项目。但你仍然需要安装 package.json 文件中列出的所有依赖项，运行以下命令：

bash 复制代码

npm init -y

接下来，你需要安装 Vite 以及 react-refresh（用于 HMR 支持）：

bash 复制代码

npm install vite @vitejs/plugin-react-refresh

配置 Vite（vite.config.js）

要正确使用 Vite，你需要在项目根目录创建一个 vite.config.js 文件。这个文件用于配置 Vite，包括所需的额外插件。

在 vite.config.js 中添加以下代码：

js 复制代码

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

export default defineConfig({
  plugins: [reactRefresh()]
});

在这个配置文件中，我们使用了 @vitejs/plugin-react-refresh 插件，它能够在你修改 React 组件时自动刷新页面。

添加构建和启动命令

我们需要在 package.json 的 scripts 部分添加 start、build 和 serve 命令，用于：

启动开发服务器。
生成生产环境构建版本。
在本地运行生产环境构建的应用。

js 复制代码

"scripts": {
  "start": "vite",
  "build": "vite build",
  "serve": "vite preview"
}

在上述代码中：

start：使用 Vite 启动开发环境，默认入口为 ./index.html。
build：运行 vite build 进行打包，打包后的文件存放在 ./dist 目录下。
serve：使用 vite preview 启动本地服务器，以便查看 ./dist 目录中的生产环境构建。

bash 复制代码

npm run start   # 启动开发服务器  
npm run build   # 生成生产环境构建  
npm run serve   # 本地运行打包后的应用

处理 CSS

当 CSS 文件在 JavaScript 代码中通过 import 语句导入时，Vite 会自动收集所有引用的 CSS 文件，并将它们打包为单个 CSS 文件，存放在 ./dist 目录中。

在提供的代码中，Carousel.css 在 Carousel.jsx 中被导入：

js 复制代码

import './Carousel.css';

Vite 不需要额外的插件或配置 ，就能自动打包 CSS 文件并放入 ./dist 目录。

运行 Vite 应用

现在，我们已经完成了 Vite 配置、修改文件扩展名，并设置了 package.json。运行 npm run build 后，项目的打包文件会生成在 ./dist 目录中。

./src 目录中的所有文件都已经被打包，并正确链接到 ./dist/index.html。

要查看打包后的应用，你需要运行：

bash 复制代码

npm run serve

然后在浏览器中打开 Vite 生成的本地服务器地址，就可以查看应用了。