最近因工作需要,需要开发一个后台管理系统。考虑到开发效率和技术成熟度,决定使用 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 来开发这个后台管理系统。
由 ChatGPT 生成
Vite 是一个非常快速的前端构建工具,主要用于开发现代化的 web 应用。它采用了 ES 模块预构建的方式,通过充分利用现代浏览器的原生模块加载能力,实现了秒级的冷启动和热更新。
Vite 的设计理念是“原生开发”,它将开发过程分为两个阶段:开发阶段和构建阶段。在开发阶段,Vite 利用现代浏览器的原生模块加载能力,直接将源代码作为 ES 模块在浏览器中加载运行,不需要打包和构建。而在构建阶段,Vite 会将应用代码和依赖打包为生产环境所需的静态资源。
使用 Vite 可以带来许多好处,包括:
总之,Vite 是一个高效、快速和灵活的前端构建工具,适用于现代化的 web 应用开发。它的设计理念和采用的技术可以帮助开发者提升开发效率,同时提供优秀的用户体验。
可以使用 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", ""),
},
},
},
});
对于不想使用 next.js 等框架,或者不想忍受 webpack 的复杂配置和慢速度的开发者来说,vite 是一个不错的选择。