【模板精简】后台前端-Ant Design Pro本文详细介绍了 Ant Design Pro 模板的精简，针对项目内的

一、项目基础

Ant Design Pro of React：antd pro 官方文档。
ProComponents：antd 配套的开箱即用的组件。

请先根据 antd pro 官方文档创建一个 simple 的基础项目，再根据下文的介绍按需精简。
请务必注意：虽然精简之后项目模板会变得简单，但由于项目是基于 UmiJS 的，所以项目本身仍然偏重。

1. 包管理器

您可根据您的实际情况，选择 pnpm/yarn/npm。

如果您是初学者，推荐使用 pnpm，依赖安装更快。
不建议此时安装依赖，后续精简时会删除或补充部分依赖。

2. 代码格式化

Ant Design Pro V6 默认使用的是 Biome，如果期望使用 Eslint 系列，请手动删除 Biome 的依赖，并集成相关依赖。

如果您使用 VS Code 系列 IDE 开发，建议安装 Biome 插件，并在你的 vscode 配置文件里添加如下配置，即可使用 Biome 快速格式化代码：

{
  // vscode 可能会有 warning，忽略即可
  // 这个 key 可能是 "biome.lspBin"，试一试哪个有效
  "biome.lsp.bin": ["node", "node_modules/.bin/biome.cmd"]
}

如果您是个人开发者，建议使用 Biome，不使用 ESLint，只聚焦于代码开发即可。

二、非核心代码精简

在开始之前，建议先阅读 Ant Design Pro of React 官方文档，对项目结构有初步的认识后，再按需精简。下文仅阐述我个人的观点、需求和精简方式。

1. `package.json` 文件

1.1 命令精简

命令介绍

{
  // *** 其他配置
  "scripts": {
    "analyze": "cross-env ANALYZE=1 max build", // 输出 Webpack 的分析产物
    "biome:lint": "npx @biomejs/biome lint", // biome 代码格式化
    "build": "max build", // 代码打包
    "deploy": "npm run build && npm run gh-pages", // 构建，并将构建结果发布到 Github Pages
    "dev": "npm run start:dev", // 开发模式启动
    "gh-pages": "gh-pages -d dist",  // 将构建结果发布到 Github Pages
    "i18n-remove": "pro i18n-remove --locale=zh-CN --write", // 移除国际化的代码，亲测不好用，只会移除部分，没法全部移除
    "postinstall": "max setup", // 项目依赖安装完成后执行，生成部分临时代码
    "lint": "npm run biome:lint && npm run tsc", // 代码格式化，并执行 ts 检查
    "lint-staged": "lint-staged", // lint-staged 插件用
    "openapi": "max openapi", // umi 系列的 openapi 使用
    "prepare": "husky", // 执行预设的 husky 命令
    "preview": "npm run build && max preview --port 8000", // 预览项目
    "record": "cross-env NODE_ENV=development REACT_APP_ENV=test max record --scene=login", // 不知道做什么的
    "serve": "umi-serve", // 启动项目，感觉和 dev 命令差不多，而且这个包已经多年未更新了
    "start": "cross-env UMI_ENV=dev max dev", // 以开发模式启动项目，带 mock 启动
    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev max dev", //  以开发环境启动项目，不带 mock 启动
    "start:no-mock": "cross-env MOCK=none UMI_ENV=dev max dev", // 以 umi 开发模式启动项目，不带 mock 启动
    "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev max dev", // 以预览环境启动项目，且 umi 为开发模式
    "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev max dev", // 以测试环境启动项目，且 umi 环境为开发模式
    "test": "jest", // 前端测试用
    "test:coverage": "npm run jest -- --coverage", // 前端测试用，输出测试覆盖率
    "test:update": "npm run jest -- -u", // 前端测试用
    "tsc": "tsc --noEmit" // ts 类型检测
  }
  // *** 其他配置
}

删除如下命令：
- gh-pages：不需要把项目静态代码部署到 Github Pages。
- i18n-remove：这个命令很鸡肋，后续手动删除国际化代码。
- openapi：不对接 openapi。
- preview：不需要预览项目。
- record：不知道做什么的。
- serve：有其他命令来启动项目。
- start:no-mock：鸡肋命令。
- test：不执行前端项目测试。
- test:coverage：不执行前端项目测试。
- test:update：不执行前端项目测试。

修改如下命令：

{
  // *** 其他配置
  "scripts": {
    // *** 其他命令
    "start:dev": "cross-env REACT_APP_ENV=dev UMI_ENV=dev MOCK=none max dev",
    "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev MOCK=none max dev",
    "start:test": "cross-env REACT_APP_ENV=test UMI_ENV=dev MOCK=none max dev"
  }
  // *** 其他配置
}

修改完后的 scripts 如下：

{
  "scripts": {
    "analyze": "cross-env ANALYZE=1 max build",
    "biome:lint": "pnpm exec biome lint",
    "build": "max build",
    "dev": "pnpm start:dev",
    "postinstall": "max setup",
    "lint": "pnpm biome:lint && pnpm tsc",
    "lint-staged": "lint-staged",
    "prepare": "husky",
    "start": "cross-env UMI_ENV=dev max dev",
    "start:dev": "cross-env REACT_APP_ENV=dev UMI_ENV=dev MOCK=none max dev",
    "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev MOCK=none max dev",
    "start:test": "cross-env REACT_APP_ENV=test UMI_ENV=dev MOCK=none max dev",
    "tsc": "tsc --noEmit"
  },
}

日常开发，需要使用 mock 时，执行 start 命令。
接口联调，不需要使用 mock 时，执行 dev 命令。

1.2 依赖精简

删除如下依赖：
- antd-style：antd CSSInJS 的依赖，建议使用模块化less (即将 less 文件命名为 xxx.module.less) 来实现 CSS 类名的唯一化。CSSInJS 不是一种优秀的最佳实践。如果您想尝试 CssInJS，可保留这个依赖。
- @testing-library/dom：测试用。
- @testing-library/react：测试用。
- @types/jest：测试用。
- @types/lodash：冗余的。如果要使用 lodash，建议手动安装 lodash-es。
- gh-pages：不发布页面到 Github Pages。
- jest：测试用。
- jest-environment-jsdom：测试用。
- swagger-ui-dist：不对接 openapi。
可根据您的实际需求，添加一些您需要的依赖。

1.3 安装依赖

精简完成后，即可执行命令安装依赖。依赖安装完成之后，项目应该是可以正确启动的，但会出现一些运行警告，且项目无法访问，因为 ant-style 相关的代码还未修改。

2. `config` 目录

该目录下保存的是项目的一些全局配置，包含路由配置。

2.1 `config/config.ts` 文件

如果你使用的包管理工具是 pnpm，则该文件很可能会包 TS 类型错误，可做如下修改：

type ConfigType = ReturnType<typeof defineConfig>;

const config: ConfigType = defineConfig({
 // ... 你的配置
});

export default config;

这个文件保存的是 Umi Max 的配置，您可以查阅相关文档来自定义这个配置文件。
这个文件不可被重命名，必须为这个名字。

2.2 `config/defaultSettings.ts` 文件

这个文件可有可无，但建议保留，可在这里配置标题、LOGO等布局属性，以及 antd 主题样式 token。
这个文件可自定义名称，只需同步修改使用到这个文件的地方即可。

2.3 `config/oneapi.json` 文件

直接删除，不对接 OpenAPI就不需要这个文件。

2.4 `config/proxy.ts` 文件

本地开发时，各个环境（开发/测试/预发布）的代理配置，你可以根据实际需求修改这个文件。

2.5 `config/routes.ts` 文件

路由配置文件，如果您的项目较大，建议新建一个 routes 目录，分模块组织路由。
具体支持的配置项、配置规则可查看文档 UmiJS-路由与菜单。
建议把路由配置都删掉，只留下首页。

3. `mock` 目录

该目录下保存的都是 mock 文件，所有的接口 mock 都可放到这个目录下。

建议只保留 mock/user.ts 文件，其他文件均删除。
建议按模块组织 mock 接口，不同模块的接口放到不同文件下，不同子模块的接口放到不同的文件中。

4. `public` 目录

该目录下保存的是项目内不常变更的静态资源。

如果没有 pwa 需求，建议直接删除 public/icons 目录；否则建议将这里的图标替换为您的项目图标。
CNAME 文件用于 Github Pages 自定义域名，直接删除。
建议删除 logo.svg 和 pro_icon.svg。
请不要忘记将 favicon.ico 替换为您自己的网站图标。

5. `test` 目录

6. `types` 目录

7. 其他文件

如果您不使用 biome 格式化代码，可删除 biome.json。
直接删除 jest.config.ts。
删除 .commitlintrc.js 和 .lintstagedrc 文件，并在 package.json 文件中补充：
```
{
  // ...其他配置
  "commitlint": {
    "extends": [
      "@commitlint/config-conventional"
    ]
  },
  "lint-staged": {
    "**/*.{js,jsx,tsx,ts,md,css,less,json}": [
      "pnpm exec biome check --write" // 如果你使用的是 npm，则这里的命令和之前 .lintstagedrc 里的一致
    ]
  }
}
```
如果你使用的是 pnpm，则你还需：
- 修改 .husky/pre-commit 文件里的命令为 pnpm exec lint-staged。
- 修改 .husky/commit-msg 文件里的命令为 pnpm exec commitlint --edit $1。
如果你的这两个 git hook 没生效，只需再执行一次依赖安装，完成后即可生效。

至此，便完成了除 src 目录外的所有代码精简。

三、核心代码精简

1. `components` 目录

这里是保存项目级通用组件的，没有需要删除的代码。

建议整理一下组件的组织结构，将布局用的放到一个目录下，其他组件也按大类组织，并在对应目录的 index.ts 文件中导出，最终从 src/components/index.ts 文件导出。
在使用 antd 和 ProComponents 时，建议将常用的组件 (如 Button、ProTable 等) 包装一层再使用，便于项目内根据实际情况做统一化（样式、默认值、数据转换等）。

2. `locales` 目录

这里保存的是国际化文件。

根据实际情况删除多余的国际化代码即可，建议保留中文和英文的国际化文件。
如果您确实不需要国际化，建议把整个目录删掉，配置路由的时候直接指定中文名。

3. `pages` 目录

这里保存的是业务模块代码。

建议只保留 Welcome.tsx 文件、src/pages/user/login/index.tsx，其他文件和文件夹全部删除，包括src/pages/user/login 目录下的测试文件。

4. `services` 目录

建议删除整个目录，接口统一放到 src/pages 的模块下面。
如果您的项目规范是接口保存到这个目录下，建议仅保留该目录，删除目录下的其他文件和目录。

5. `access.ts` 文件

用于做权限控制，建议保留。

6. `app.tsx` 文件

用于导出 UmiJS-运行时配置。
建议把里面关于 antd 的代码删除，并将一些配置修改为您的项目相关的。

7. `global.style.ts` 文件

全局的 CSSInJS，建议把这个文件里的代码改写为 less 代码，并放到同级的 global.less 文件中，然后删除该文件。

8. `global.tsx` 文件

模板里这个文件只保存了 pwa 相关的代码，如果您的项目不需要支持 pwa，可直接删除这个文件。

9. `manifest.json` 文件

pwa 用，如果您的项目不需要支持 pwa，可直接删除这个文件。

10. `requestErrorConfig.ts` 文件

自定义 axios Interceptors，根据实际需求编写即可。

11. `service-worker.js` 文件

pwa 用，如果您的项目不需要支持 pwa，可直接删除这个文件。

结语

至此，整个 antd pro 的项目模板就精简完成了，您可启动项目来查看项目是否可以正常运行。

此外，建议在这个精简模板里补充如下组件：

ProTable：基于 @ant-design/pro-components 的 ProTable 包装一层，把数据格式、项目内统一配置集成到这里。

【模板精简】后台前端-Ant Design Pro

一、项目基础

1. 包管理器

2. 代码格式化

二、非核心代码精简

1. package.json 文件

1.1 命令精简

1.2 依赖精简

1.3 安装依赖

2. config 目录

2.1 config/config.ts 文件

2.2 config/defaultSettings.ts 文件

2.3 config/oneapi.json 文件

2.4 config/proxy.ts 文件

2.5 config/routes.ts 文件

3. mock 目录

4. public 目录

5. test 目录

6. types 目录

7. 其他文件

三、核心代码精简

1. components 目录

2. locales 目录

3. pages 目录

4. services 目录

5. access.ts 文件

6. app.tsx 文件

7. global.style.ts 文件

8. global.tsx 文件

9. manifest.json 文件

10. requestErrorConfig.ts 文件

11. service-worker.js 文件

结语