Github 地址 | 文档地址 | 预览地址
react-antd-console 是一个后台管理系统的前端解决方案，封装了后台管理系统必要功能（如登录、鉴权、菜单、面包屑、标签页等），帮助开发人员专注于业务快速开发。项目基于 React 18、Ant design 5、Vite 和 TypeScript 等新版本。对于使用到的各项技术，会被持续更新至最新版本。可放心用于生产环境。
为了方便大家更好的掌握和使用本项目，推出系列文章:
如果你喜欢这个项目或认为对你有用，欢迎使用体验和 Star
1. 概述
首先我们需要搞定构建工具问题，我们使用了 Vite 作为构建工具
Vite 是一个超快速的前端构建工具，推动着下一代网络应用的发展
Vite 最大的特点是启动极速(通常 1s 内)、轻量快速的热更新、对 TypeScript 、JSX 、CSS 等支持开箱即用。相较于 Webpack 传统构建工具，其配置极简，并同样可以实现我们想要的诸多功能，维护心智负担极低
1.1 Vite 的问题
如果一个构建工具存在瓶颈，那么哪怕其他有再好的方面，最终也无法选用。所以我们不能忽视 Vite 的缺点。那就是:
1.1.1 刷新页面慢？
Vite 因为减少了源文件（ JS/TS/CSS ）的工作量，导致并发请求多而拖慢刷新页面的速度。但结合启动和热更新，在速度上，相比 Webpack ，本文档认为仍然具有明显的优势
本项目在开发启动后，刷新首页，共有 168 项请求，耗时 150 至 200 毫秒。作为参考
1.1.2 开发和打包不一致？
理论上是有可能的，因为 Vite 开发使用 esbuild, 打包使用 rollup 。但实际情况中，作者从没有碰到过不一致的情况。而且 Vite 即将使用 Rolldown 作为底层打包工具。Rolldown 将保证开发和打包结果完全一致，并提供更快的打包速度。届时可平滑升级
2. Vite 内置
Vite 内置了很多开箱即用的功能，本项目用到的内置功能有:
2.1 样式
样式预处理器我们使用的是 Less。在 Vite 中，只需要安装 less 模块即可直接使用
npm i -D less
本项目没有额外配置 less 选项，若需要进一步配置，可参考 Vite 配置 css.preprocessorOptions
2.1.1 打包后，样式名自动加前缀
对于样式名，不同浏览器可能有不同的前缀，例如 -webkit-、-ms-、-moz- 等。但我们写代码时并不想写这些前缀，但打包时可以自动生成。Vite 中如果项目包含有效的 PostCSS 配置 (任何受 postcss-load-config 支持的格式，例如 postcss.config.cjs)，它将会自动应用于所有已导入的 CSS 。
安装 PostCSS 插件 autoprefixer
npm i -D autoprefixer
在 /postcss.config.cjs 中配置自动前缀插件即可生效:
// postcss.config.cjs
module.exports = {
plugins: [
require('autoprefixer'),
],
};
参考文档:
2.2 入口
说明:
打包前:
react-antd-console
打包后:
react-antd-console
2.3 打包
当我们通过 package.json 中的 npm run build:prod 命令打包时，其实是调用了 vite build --mode prod命令。默认情况下，它使用 /index.html 作为其构建入口点，并生成能够静态部署的应用程序包 /dist/。若要部署，我们将打完的包放到 nginx 等服务上即可
我们还可以指定打包后的文件所支持的浏览器目标，例如指定为支持 es2015 浏览器
// vite.config.js
export default defineConfig({
build: {
target: 'es2015',
},
})
参考文档:
2.4 public 目录
public 目录 位于根目录的 /public 文件夹。该目录中的资源在开发时能直接通过 / 根路径访问到，并且打包时会被完整复制到目标目录的根目录下
3. Vite 配置
另外有些功能是需要配置的，Vite 配置极其简洁。配置文件位于根目录的 /vite.config.ts 如下:
// vite.config.ts
export default defineConfig({
plugins: [
react(),
createSvgIconsPlugin({
iconDirs: [path.resolve(process.cwd(), 'src/assets/svg')],
symbolId: 'icon-[dir]-[name]',
}),
],
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@@': path.resolve(__dirname, './examples'),
},
},
server: {
host: true,
port: 9527,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
esbuild: {
target: 'chrome65',
},
build: {
target: 'es2015',
},
});
以下功能为配置后生效的功能:
3.1 开发服务
// vite.config.js
export default defineConfig({
server: {
host: true,
port: 9527,
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, ''),
},
},
},
})
server.proxy 为开发服务器配置自定义代理规则。具体配置继承自 http-proxy。
启动服务后，Vite 会使用 esbuild 作为编译工具，我们指定下编译的文件所支持的浏览器版本为 chrome65 以上:
// vite.config.js
export default defineConfig({
esbuild: {
target: 'chrome65',
},
})
3.2 react 支持
使用官方的 react 插件 @vitejs/plugin-react，支持:
// vite.config.js
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})
3.3 路径别名
import 文件时，我们常常会把 /src 别名为 @，这样编写代码就比较方便
// vite.config.js
export default defineConfig({
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
},
},
})
3.4 多环境
多环境采用 vite 内置的方案。
如何新增环境，并新增环境变量？
[ol]
[/ol]
3.4.1 指定环境构建
添加构建命令:
// package.json
{
"scripts": {
"build:newEnv": "vite build --mode newEnv",
}
}
执行构建:
npm run build:newEnv
4. 其他 Vite 不相关的工程化配置
4.1 编码规范
项目总体按最小约束原则约束编码规范，只使用了 eslint。你可以根据自己的需求自行添加各规范，如 stylelint、prettier 等
[!TIP]
我们认为在编码规范方面，应当在工程统一性和灵活性之间找到一个平衡，而不是一味地使用各种 lint 类工具作强制约束。你可以找到自己团队的平衡点，定制适合自己团队的编码规范
4.1.1 eslint 规则
本项目采用官方建议的通用 eslint 规则，如下:
详见 /.eslintrc.cjs
eslint 可配合 husky、lint-staged 实现 git commit 时自动校验 eslint，其他文档和教程很多，在此不再赘述
5. 完整版预览
5.1 深/浅色主题
[td]
[/td]
[td]
[/td]
Light
Dark
5.2 任意主色切换
[td]
[/td]
[td]
[/td]
[td]
[/td]
[td]
[/td]
5.3 任意背景色切换
[td]
[/td]
[td]
[/td]
Background Light
Background Dark
5.4 4 种布局
[td]
[/td]
[td]
[/td]
侧分栏
侧单栏
[td]
[/td]
[td]
[/td]
头分栏
头单栏
5.5 丰富的主题配置
6. 系列文章
如果你喜欢这个项目或认为对你有用，欢迎使用体验和 Star
Github 地址 | 文档地址 | 预览地址
