umi Ant Design Pro 示例工程实战基于 umijs/max 的企业级前端脚手架【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiexamples/antd-pro-create是 umi 仓库中用于演示用 Ant Design Pro 模板初始化项目后如何与 umimax体系协同工作的完整示例工程。本篇以该工程的 README 为主线逐条展开其环境准备、脚本体系与工程化配置并结合 package.json 与 config 目录 的源码讲清楚每个命令背后实际执行了什么、多环境变量如何影响开发服务以及如何用 Cypress / Playwright 对工程做端到端验证。读完你可以直接在这个工程上启动、构建、校验与测试一个企业级中后台前端项目。工程定位workspace 内的 Pro 模板示例该示例位于examples/下是 pnpm workspace 的成员之一——pnpm-workspace.yaml 声明了packages/*、examples/*等目录均为 workspace 包。它的 package.json 中关键依赖为{ dependencies: { antd: ^4.23.3, react: ^17.0.0, ant-design/pro-components: ^2.3.13 }, devDependencies: { umijs/max: workspace:*, umi-presets-pro: ^2.0.3 }, engines: { node: 12.0.0 } }需要注意两点事实边界umijs/max的版本是workspace:*即引用的是本仓库packages/max中正在开发的版本而不是 npm 上发布的版本。因此该示例的适用前提是在 umi 仓库根目录通过 pnpm 安装依赖并构建本地包脱离 monorepo 单独运行会拿不到workspace:*依赖。技术栈组合为 React 17 antd 4 Pro Components 2属于 Pro 模板的经典版本组合配置与 API 以此版本为准。环境准备README 给出的原始步骤是安装依赖npm install # 或 yarn由于本仓库采用 pnpm workspace 管理见 pnpm-lock.yaml 与 pnpm-workspace.yaml实际在本仓库内准备该示例环境时应在仓库根目录执行 pnpm 安装让umijs/max: workspace:*正确解析到本地包examples/antd-pro-create目录内则按模板原意执行npm install/yarn即可。脚本体系从 README 四件套到完整脚本表README 中最核心的内容是Provided Scripts一节声明了四个基础命令。对照当前 package.json 的scripts字段可以给出完整的脚本表README 的四件套全部在其中且已明显扩充脚本实际命令作用start/devnpm run start:dev启动开发服务带REACT_APP_ENVdev UMI_ENVdevstart:devcross-env REACT_APP_ENVdev UMI_ENVdev max dev以 dev 环境启动 max 开发服务start:no-mockcross-env MOCKnone UMI_ENVdev max dev关闭 mock 数据启动start:pre/start:testcross-env REACT_APP_ENVpre\|test ...切换 API 环境启动buildmax build生产构建analyzecross-env ANALYZE1 max build构建并输出产物体积分析previewmax preview --port 9527本地预览构建产物deploynpm run build npm run gh-pages构建并发布到 gh-pagesserveumi-serve用 umi-serve 托管静态产物lintlint:js lint:prettier tscESLint Prettier 类型检查lint:fixeslint --fix --cache --ext .js,.jsx,.ts,.tsx --formatpretty ./src自动修复 lint 问题tsctsc --noEmit仅做 TypeScript 类型检查i18n-removepro i18n-remove --localezh-CN --write移除指定语言的 i18n 文案openapimax openapi基于 OpenAPI schema 生成 services 与 mocke2e/e2e:cicypress run/ start-server-and-test 组合Cypress 端到端测试playwrightplaywright install playwright testPlaywright 端到端测试test:e2enode ./tests/run-tests.js旧的 e2e 运行入口tests 目录README 四个基础命令与现状的差异启动npm start在当前 package.json 中被定义为一个转发链start→dev→start:dev最终执行cross-env REACT_APP_ENVdev UMI_ENVdev max dev。也就是说启动并不是裸跑max dev而是同时注入了两个环境变量见下文多环境小节。构建npm run build即max build与 README 描述一致额外的analyze脚本在其上加了ANALYZE1用于产物分析。代码风格检查README 中的npm run lint/npm run lint:fix对应现状。当前lint脚本实际是三段式ESLint 检查lint:js→ Prettier 校验lint:prettier只检查src/**/*→tsc --noEmit类型检查比 README 描述的style check覆盖面更广lint:fix则只对./src执行eslint --fix。此外还有提交期钩子lint-staged配置声明了**/*.{js,jsx,ts,tsx}走 ESLint、其余源码/样式/文档走prettier --write。测试README 写的是npm test但当前 package.json 中没有名为test的脚本——可以推断这是文档相对模板的滞后。当前仓库中真正可执行的端到端测试入口是e2ecypress run、e2e:ci先起服务再跑 Cypress与playwright另外保留了test:e2e指向 tests/run-tests.js 的旧入口。多环境变量与代理REACT_APP_ENV 驱动的开发服务start:dev/start:pre/start:test/start:no-mock这组脚本的差别只在环境变量而变量如何影响运行时体现在两处源码中config/config.ts 读取process.env.REACT_APP_ENV来决定使用哪套代理配置const { REACT_APP_ENV } process.env; export default defineConfig({ // ... proxy: proxy[REACT_APP_ENV || dev], // ... });config/proxy.ts 按dev/test/pre三个键组织代理规则其中test环境把/api/前缀的请求转发到远程 API 并做了路径重写export default { dev: {}, test: { /api/: { target: https://proapi.azurewebsites.net, changeOrigin: true, pathRewrite: { ^: }, }, }, pre: { /api/: { /* 指向预发环境 */ }, }, };这与start:no-mock中的MOCKnone形成互补MOCKnone关闭的是 umi 内置 mock 机制而REACT_APP_ENV切换的是代理目标。两者共同决定了开发模式下接口数据的来源。代理只在开发期生效构建产物中不生效这一点在 proxy.ts 文件头部注释中有明确说明。构建、预览与部署max build生产构建。配合analyze脚本ANALYZE1 max build可输出体积分析。max preview --port 9527本地预览构建产物端口 9527 与下文 CI 流程中的端口保持一致。deploybuild gh-pages -d dist把产物发布到 GitHub Pages依赖gh-pages包。serve使用umi-serve托管静态产物适合快速起一个生产样式的静态服务。端到端测试Cypress 与 Playwright 双轨该示例同时配置了两套 E2E 工具可从源码确认具体行为Cypresscypress.config.ts 中baseUrl取http://localhost:${PORT}默认 8000retries.runMode设为 3并在 Windows 平台上把defaultCommandTimeout放宽到 60 秒。CI 脚本e2e:ci通过start-server-and-test preview http://127.0.0.1:9527 cypress:ci实现先起 preview 服务、就绪后再跑测试的编排另有e2e:dev:ci用start启动开发服务并以http://127.0.0.1:9527/__umi/api/status作为就绪探针——这个 status 接口正是 umi 开发服务提供的健康检查端点。测试用例位于 cypress/e2e 与 src/e2e 下。Playwrightplaywright.config.ts 声明了 chromium 与 firefox 两个项目CI 下开启forbidOnly与 2 次重试并对首次重试开启 trace便于失败定位。单元测试tests/目录保留了run-tests.js/setupTests.js对应test:e2e脚本属于模板遗留的旧式 runner 入口。配置骨架config 目录与运行时配置理解这些脚本为什么这么写需要看工程的两层配置静态配置config/入口为 config/config.ts在 umi 基础项hash、routes、theme、ignoreMomentLocale、proxy、fastRefresh之外开启了 max 的一组插件model: {}, // 数据流 initialState: {}, // 全局初始状态 layout: { locale: true, ...defaultSettings }, // ProLayout 布局 locale: { default: zh-CN, antd: true, baseNavigator: true }, antd: {}, request: {}, // 基于 axios useRequest 的统一请求 access: {}, // 基于 initialState 的权限 presets: [umi-presets-pro], openAPI: [ { schemaPath: join(__dirname, oneapi.json), requestLibPath: import { request } from umijs/max, mock: false }, { schemaPath: https://.../openapi.json, projectName: swagger }, ],其中openAPI配置正是npm run openapimax openapi脚本的输入基于本地 oneapi.json 与远端 swagger schema 生成 services 与 mock减少样板代码。路由集中在 config/routes.ts覆盖了 Pro 模板的典型形态/user/login用layout: false脱离主布局/admin路由通过access: canAdmin声明权限约束/重定向到/welcome*通配落到 404 页。布局默认值navTheme、主色#1890ff、layout: mix等则来自 config/defaultSettings.ts。运行时配置src/app.tsxsrc/app.tsx 导出了 max 约定的三个运行时钩子与静态配置形成闭环getInitialState非登录页时调用queryCurrentUser拉取用户信息失败则重定向到/user/login并把fetchUserInfo、currentUser、settings一起放进全局初始状态layout返回RunTimeLayoutConfig注入水印、右侧内容区RightContent、页脚Footer、未登录守卫onPageChange并通过childrenRender挂载SettingDrawer实现主题动态切换这依赖 config.ts 中theme: { root-entry-name: variable }的设置注释里明确说明只有variable模式才支持动态主题request展开errorConfig来自 src/requestErrorConfig.ts提供统一错误处理。小结与适用前提该示例展示的是模板初始化后的完整工程形态多环境启动脚本、构建/预览/部署链路、三段式 lint、双 E2E 工具均已在 package.json 中落地可按脚本表直接照抄到自建项目。适用前提依赖 React 17 antd 4 的 Pro 模板版本且umijs/max在本仓库中为workspace:*脱离 monorepo 运行时需将其替换为可发布的 npm 版本。若要在仓库内验证根目录安装依赖后在examples/antd-pro-create下依次执行npm run start:dev开发、npm run lint质量检查、npm run build npm run preview构建预览、npm run e2eCypress 验证即可覆盖 README 所述的全部工作流。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 umi Ant Design Pro 示例工程实战：基于 @umijs/max 的企业级前端脚手架
umi Ant Design Pro 示例工程实战基于 umijs/max 的企业级前端脚手架【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umiexamples/antd-pro-create是 umi 仓库中用于演示用 Ant Design Pro 模板初始化项目后如何与 umimax体系协同工作的完整示例工程。本篇以该工程的 README 为主线逐条展开其环境准备、脚本体系与工程化配置并结合 package.json 与 config 目录 的源码讲清楚每个命令背后实际执行了什么、多环境变量如何影响开发服务以及如何用 Cypress / Playwright 对工程做端到端验证。读完你可以直接在这个工程上启动、构建、校验与测试一个企业级中后台前端项目。工程定位workspace 内的 Pro 模板示例该示例位于examples/下是 pnpm workspace 的成员之一——pnpm-workspace.yaml 声明了packages/*、examples/*等目录均为 workspace 包。它的 package.json 中关键依赖为{ dependencies: { antd: ^4.23.3, react: ^17.0.0, ant-design/pro-components: ^2.3.13 }, devDependencies: { umijs/max: workspace:*, umi-presets-pro: ^2.0.3 }, engines: { node: 12.0.0 } }需要注意两点事实边界umijs/max的版本是workspace:*即引用的是本仓库packages/max中正在开发的版本而不是 npm 上发布的版本。因此该示例的适用前提是在 umi 仓库根目录通过 pnpm 安装依赖并构建本地包脱离 monorepo 单独运行会拿不到workspace:*依赖。技术栈组合为 React 17 antd 4 Pro Components 2属于 Pro 模板的经典版本组合配置与 API 以此版本为准。环境准备README 给出的原始步骤是安装依赖npm install # 或 yarn由于本仓库采用 pnpm workspace 管理见 pnpm-lock.yaml 与 pnpm-workspace.yaml实际在本仓库内准备该示例环境时应在仓库根目录执行 pnpm 安装让umijs/max: workspace:*正确解析到本地包examples/antd-pro-create目录内则按模板原意执行npm install/yarn即可。脚本体系从 README 四件套到完整脚本表README 中最核心的内容是Provided Scripts一节声明了四个基础命令。对照当前 package.json 的scripts字段可以给出完整的脚本表README 的四件套全部在其中且已明显扩充脚本实际命令作用start/devnpm run start:dev启动开发服务带REACT_APP_ENVdev UMI_ENVdevstart:devcross-env REACT_APP_ENVdev UMI_ENVdev max dev以 dev 环境启动 max 开发服务start:no-mockcross-env MOCKnone UMI_ENVdev max dev关闭 mock 数据启动start:pre/start:testcross-env REACT_APP_ENVpre\|test ...切换 API 环境启动buildmax build生产构建analyzecross-env ANALYZE1 max build构建并输出产物体积分析previewmax preview --port 9527本地预览构建产物deploynpm run build npm run gh-pages构建并发布到 gh-pagesserveumi-serve用 umi-serve 托管静态产物lintlint:js lint:prettier tscESLint Prettier 类型检查lint:fixeslint --fix --cache --ext .js,.jsx,.ts,.tsx --formatpretty ./src自动修复 lint 问题tsctsc --noEmit仅做 TypeScript 类型检查i18n-removepro i18n-remove --localezh-CN --write移除指定语言的 i18n 文案openapimax openapi基于 OpenAPI schema 生成 services 与 mocke2e/e2e:cicypress run/ start-server-and-test 组合Cypress 端到端测试playwrightplaywright install playwright testPlaywright 端到端测试test:e2enode ./tests/run-tests.js旧的 e2e 运行入口tests 目录README 四个基础命令与现状的差异启动npm start在当前 package.json 中被定义为一个转发链start→dev→start:dev最终执行cross-env REACT_APP_ENVdev UMI_ENVdev max dev。也就是说启动并不是裸跑max dev而是同时注入了两个环境变量见下文多环境小节。构建npm run build即max build与 README 描述一致额外的analyze脚本在其上加了ANALYZE1用于产物分析。代码风格检查README 中的npm run lint/npm run lint:fix对应现状。当前lint脚本实际是三段式ESLint 检查lint:js→ Prettier 校验lint:prettier只检查src/**/*→tsc --noEmit类型检查比 README 描述的style check覆盖面更广lint:fix则只对./src执行eslint --fix。此外还有提交期钩子lint-staged配置声明了**/*.{js,jsx,ts,tsx}走 ESLint、其余源码/样式/文档走prettier --write。测试README 写的是npm test但当前 package.json 中没有名为test的脚本——可以推断这是文档相对模板的滞后。当前仓库中真正可执行的端到端测试入口是e2ecypress run、e2e:ci先起服务再跑 Cypress与playwright另外保留了test:e2e指向 tests/run-tests.js 的旧入口。多环境变量与代理REACT_APP_ENV 驱动的开发服务start:dev/start:pre/start:test/start:no-mock这组脚本的差别只在环境变量而变量如何影响运行时体现在两处源码中config/config.ts 读取process.env.REACT_APP_ENV来决定使用哪套代理配置const { REACT_APP_ENV } process.env; export default defineConfig({ // ... proxy: proxy[REACT_APP_ENV || dev], // ... });config/proxy.ts 按dev/test/pre三个键组织代理规则其中test环境把/api/前缀的请求转发到远程 API 并做了路径重写export default { dev: {}, test: { /api/: { target: https://proapi.azurewebsites.net, changeOrigin: true, pathRewrite: { ^: }, }, }, pre: { /api/: { /* 指向预发环境 */ }, }, };这与start:no-mock中的MOCKnone形成互补MOCKnone关闭的是 umi 内置 mock 机制而REACT_APP_ENV切换的是代理目标。两者共同决定了开发模式下接口数据的来源。代理只在开发期生效构建产物中不生效这一点在 proxy.ts 文件头部注释中有明确说明。构建、预览与部署max build生产构建。配合analyze脚本ANALYZE1 max build可输出体积分析。max preview --port 9527本地预览构建产物端口 9527 与下文 CI 流程中的端口保持一致。deploybuild gh-pages -d dist把产物发布到 GitHub Pages依赖gh-pages包。serve使用umi-serve托管静态产物适合快速起一个生产样式的静态服务。端到端测试Cypress 与 Playwright 双轨该示例同时配置了两套 E2E 工具可从源码确认具体行为Cypresscypress.config.ts 中baseUrl取http://localhost:${PORT}默认 8000retries.runMode设为 3并在 Windows 平台上把defaultCommandTimeout放宽到 60 秒。CI 脚本e2e:ci通过start-server-and-test preview http://127.0.0.1:9527 cypress:ci实现先起 preview 服务、就绪后再跑测试的编排另有e2e:dev:ci用start启动开发服务并以http://127.0.0.1:9527/__umi/api/status作为就绪探针——这个 status 接口正是 umi 开发服务提供的健康检查端点。测试用例位于 cypress/e2e 与 src/e2e 下。Playwrightplaywright.config.ts 声明了 chromium 与 firefox 两个项目CI 下开启forbidOnly与 2 次重试并对首次重试开启 trace便于失败定位。单元测试tests/目录保留了run-tests.js/setupTests.js对应test:e2e脚本属于模板遗留的旧式 runner 入口。配置骨架config 目录与运行时配置理解这些脚本为什么这么写需要看工程的两层配置静态配置config/入口为 config/config.ts在 umi 基础项hash、routes、theme、ignoreMomentLocale、proxy、fastRefresh之外开启了 max 的一组插件model: {}, // 数据流 initialState: {}, // 全局初始状态 layout: { locale: true, ...defaultSettings }, // ProLayout 布局 locale: { default: zh-CN, antd: true, baseNavigator: true }, antd: {}, request: {}, // 基于 axios useRequest 的统一请求 access: {}, // 基于 initialState 的权限 presets: [umi-presets-pro], openAPI: [ { schemaPath: join(__dirname, oneapi.json), requestLibPath: import { request } from umijs/max, mock: false }, { schemaPath: https://.../openapi.json, projectName: swagger }, ],其中openAPI配置正是npm run openapimax openapi脚本的输入基于本地 oneapi.json 与远端 swagger schema 生成 services 与 mock减少样板代码。路由集中在 config/routes.ts覆盖了 Pro 模板的典型形态/user/login用layout: false脱离主布局/admin路由通过access: canAdmin声明权限约束/重定向到/welcome*通配落到 404 页。布局默认值navTheme、主色#1890ff、layout: mix等则来自 config/defaultSettings.ts。运行时配置src/app.tsxsrc/app.tsx 导出了 max 约定的三个运行时钩子与静态配置形成闭环getInitialState非登录页时调用queryCurrentUser拉取用户信息失败则重定向到/user/login并把fetchUserInfo、currentUser、settings一起放进全局初始状态layout返回RunTimeLayoutConfig注入水印、右侧内容区RightContent、页脚Footer、未登录守卫onPageChange并通过childrenRender挂载SettingDrawer实现主题动态切换这依赖 config.ts 中theme: { root-entry-name: variable }的设置注释里明确说明只有variable模式才支持动态主题request展开errorConfig来自 src/requestErrorConfig.ts提供统一错误处理。小结与适用前提该示例展示的是模板初始化后的完整工程形态多环境启动脚本、构建/预览/部署链路、三段式 lint、双 E2E 工具均已在 package.json 中落地可按脚本表直接照抄到自建项目。适用前提依赖 React 17 antd 4 的 Pro 模板版本且umijs/max在本仓库中为workspace:*脱离 monorepo 运行时需将其替换为可发布的 npm 版本。若要在仓库内验证根目录安装依赖后在examples/antd-pro-create下依次执行npm run start:dev开发、npm run lint质量检查、npm run build npm run preview构建预览、npm run e2eCypress 验证即可覆盖 README 所述的全部工作流。【免费下载链接】umiA framework in react community ✨项目地址: https://gitcode.com/GitHub_Trending/um/umi创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考