使用vite开发react应用

杜逸先

发布于 2023-06-23 14:03:21

5640

发布于 2023-06-23 14:03:21

最近因工作需要，需要开发一个后台管理系统。考虑到开发效率和技术成熟度，决定使用 React 和 Ant Design 的技术栈。

之前我一直使用 create-react-app 来创建 React 项目，但是 create-react-app 已经很久没有更新了，新版的react 文档也不再推荐使用 create-react-app，而是推荐使用更成熟的框架，比如 next.js 与 remix。next.js 与 remix 都是比较大的 SSR 框架，对于简单的后台管理系统来说，可能有点大材小用。

作为一个新兴的前端构建工具，vite 的成熟度日益提升，对于 React.js 的支持也已经很完善，所以我决定使用 vite 来开发这个后台管理系统。

vite 介绍

由 ChatGPT 生成

Vite 是一个非常快速的前端构建工具，主要用于开发现代化的 web 应用。它采用了 ES 模块预构建的方式，通过充分利用现代浏览器的原生模块加载能力，实现了秒级的冷启动和热更新。

Vite 的设计理念是“原生开发”，它将开发过程分为两个阶段：开发阶段和构建阶段。在开发阶段，Vite 利用现代浏览器的原生模块加载能力，直接将源代码作为 ES 模块在浏览器中加载运行，不需要打包和构建。而在构建阶段，Vite 会将应用代码和依赖打包为生产环境所需的静态资源。

使用 Vite 可以带来许多好处，包括：

快速的开发体验：Vite 利用原生模块加载，避免了传统打包工具中繁重的构建过程，开发者可以立即看到修改代码的效果，大大提高了开发效率。
高效的热更新：Vite 支持热更新，即使是在大型项目中也可以实现秒级的代码更新，而不需要刷新整个页面。
灵活的插件系统：Vite 具有灵活的插件系统，可以轻松扩展其功能，例如添加自定义的打包处理、优化等。
支持多种开发框架：Vite 支持多种主流的前端开发框架，包括 Vue、React、Preact 等，可以根据项目的需求选择适合的框架。

总之，Vite 是一个高效、快速和灵活的前端构建工具，适用于现代化的 web 应用开发。它的设计理念和采用的技术可以帮助开发者提升开发效率，同时提供优秀的用户体验。

使用 vite 开发 react 应用

初始化应用

可以使用 vite 提供的 cli 工具来初始化一个 react 应用：

# npm 7+
npm create vite@latest my-react-app -- --template react-swc-ts

# yarn
yarn create vite my-react-app --template react-swc-ts

这里使用的模板是 react-swc-ts，提供 typescript 的配置，使用了 swc 作为编译器，可以提供更快的编译速度。

应用初始化之后需要安装一下依赖。

yarn install

启动开发服务器

简单地运行yarn dev就可以启动开发服务器了（实际上运行的是vite命令）。

yarn dev

热更新

vite 的 dev server 会将代码直接编译为 es module，热更新十分迅速。

简单修改一下App.tsx文件，可以看到热更新的效果。

额外配置

修改vite.config.ts文件，添加一些额外的配置（主要是进行开发环境下的 api 代理配置）。

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react-swc";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      "/api": {
        target: "http://127.0.0.1:3000",
        changeOrigin: true,
        rewrite: (path) => path.replace("/api", ""),
      },
    },
  },
});