Ant Design Pro

开始使用前言

Ant Design Pro 是基于 Ant Design 和 umi 的封装的一整套企业级中后台前端/设计解决方案

Ant Design Pro 作为一个前端脚手架，默认读者已经懂了一些前端的基础知识，并且了解 umi 和 Ant Design, 如果你是纯粹的新手，第一次来跑项目建议读一下新手需知。磨刀不误砍柴工，了解一些基础知识可以让学习曲线更加平滑。

包管理器

推荐使用 tyarn 来进行包管理，可以极大地减少 install 的时间和失败的概率，并且完全兼容 npm。

如果喜欢使用 npm 而不是 yarn，可以使用 cnpm, 安装速度比 tyarn 更快，但是与 npm 不是完全兼容。

运行时和编译时

Pro 的底座基于 umi， umi 与 webpack 相比增加了运行时相关的能力，我们在开发中有时候可能难以区分。

编译时指的是代码在编译的时候做的事情，这个阶段的环境一般是 node 环境，可以使用 fs，path 等功能。但是同时因为没有使用 webpack ，所以 jsx，引入图片等非 node 的能力是无法使用的。
运行时是指代码已经编译完成开始运行的阶段，这个阶段一般是浏览器环境，不能使用 fs，path 等功能，访问 url 也会有跨域的问题，但是这个环境被 webpack 编译过，所以可以写 jsx，导入图片等功能。

以上两个环境用起来容易混淆，这里有一个简单的版本，src 文件夹中都是运行时的代码，都会经过 webpack 编译。其他目录的都可以认为是编译时，可以使用 node 能力。这也是为什么我们不能在 config.ts 里面写 JSX 的原因。

Umi 的插件

Pro 的底座是 umi，umi 是一个 webpack 之上的整合工具。 umi 相比于 webpack 增加了运行时的能力，同时帮助我们配置了很多 webpack 的预设。也减少了 webpack 升级导致的问题。这也是我们能提供插件的原因。

plugin-access，权限管理
plugin-analytics，统计管理
plugin-antd，整合 antd UI 组件
plugin-initial-state，初始化数据管理
plugin-layout，配置启用 ant-design-pro 的布局
plugin-locale，国际化能力
plugin-model，基于 hooks 的简易数据流
plugin-request，基于 umi-request 和 umi-hooks 的请求方案

如果不喜欢 umi 默认的配置，可以在这里看看有没有你喜欢的配置。如果还是不能满足就要自定义 webpack 了，chainWebpack 可以自定义内置的 webpack 配置。

webpack 对于 node 也是有版本需求的，不同 webpack 对 node 版本的依赖也不同，所以最好的办法是升级到最新的长期维护版本。

前序准备#

你的本地环境需要安装 node 和 git。我们的技术栈基于 ES2015+、React、UmiJS、dva、g2 和 antd，提前了解和学习这些知识会非常有帮助。

安装#

创建项目我们提供了 create umi 来快速的初始化脚手架。

yarn create umi myapp

选择项按照 umi 脚手架的引导，第一步先选择 ant-design-pro：

? Select the boilerplate type (Use arrow keys)
> ant-design-pro  - Create project with a layout-only ant-design-pro boilerplate, use together with umi block.
  app             - Create project with a simple boilerplate, support typescript.
  plugin          - Create a umi plugin.

选择类型（静态校验/js）选择 antd 的语言版本，TypeScript 或 JavaScript

? 🤓 Which language do you want to use? (Use arrow keys)
> TypeScript
  JavaScript

选择简单还是集合的（简单/复杂）选择 antd 的模板，simple 是基础模板，只提供了框架运行的基本内容，complete 包含 antd 的集成方案，不太适合当基础模板来进行二次开发

? 🚀 Do you need all the blocks or a simple scaffold? (Use arrow keys)
> simple
  complete

进入项目安装依赖运行，安装依赖：

cd myapp   // 进入项目

yarn  //安装项目依赖 

yarn start // 启动项目

scripts 脚本

 // 常用
 "start": "cross-env UMI_ENV=dev umi dev", 
 // start 运行这个脚本会启动服务，自动打开默认浏览器展示你的页面。当你重新编辑代码后，页面还会自动刷新。
  "build": "umi build",
 // build  运行这个脚本将会编译你的项目，你可以在项目中的 dist 目录中找到编译后的文件用于部署。
  "analyze": "cross-env ANALYZE=1 umi build",
 // analyze 脚本做的事情与 build 的相同，但是他会打开一个页面来展示你的依赖信息。如果需要优化性能和包大小，你需要它。
  "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier && npm run tsc",
 // lint 我们提供了一系列的 lint 脚本，包括 TypeScript，less，css，md 文件。你可以通过这个脚本来查看你的代码有哪些问题。在 commit 中我们自动运行相关 lint。
  "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
 // `lint:fix` 与 lint 相同，但是会自动修复 lint 的错误。
 "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
 // i18n-remove （一句命令删除国际化）这个脚本将会尝试删除项目中所有的 i18n 代码，对于复杂的运行时代码，表现并不好，慎用。

    "analyze": "cross-env ANALYZE=1 umi build", // analyze 脚本做的事情与 build 的相同，但是他会打开一个页面来展示你的依赖信息。如果需要优化性能和包大小，你需要它。
    "build": "umi build",  // 打包
    "deploy": "npm run build && npm run gh-pages",
    "dev": "npm run start:dev",
    "gh-pages": "gh-pages -d dist",
    "i18n-remove": "pro i18n-remove --locale=zh-CN --write",
    "postinstall": "umi g tmp",
    "lint": "umi g tmp && npm run lint:js && npm run lint:style && npm run lint:prettier && npm run tsc",
    "lint-staged": "lint-staged",
    "lint-staged:js": "eslint --ext .js,.jsx,.ts,.tsx ",
    "lint:fix": "eslint --fix --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src && npm run lint:style",
    "lint:js": "eslint --cache --ext .js,.jsx,.ts,.tsx --format=pretty ./src",
    "lint:prettier": "prettier -c --write \"src/**/*\" --end-of-line auto",
    "lint:style": "stylelint --fix \"src/**/*.less\" --syntax less",
    "openapi": "umi openapi",
    "playwright": "playwright install && playwright test",
    "precommit": "lint-staged",
    "prettier": "prettier -c --write \"src/**/*\"",
    "serve": "umi-serve", 
    "start": "cross-env UMI_ENV=dev umi dev", // 启动项目
    "start:dev": "cross-env REACT_APP_ENV=dev MOCK=none UMI_ENV=dev umi dev",
    "start:no-mock": "cross-env MOCK=none UMI_ENV=dev umi dev",
    "start:no-ui": "cross-env UMI_UI=none UMI_ENV=dev umi dev",
    "start:pre": "cross-env REACT_APP_ENV=pre UMI_ENV=dev umi dev",
    "start:test": "cross-env REACT_APP_ENV=test MOCK=none UMI_ENV=dev umi dev",
    "test": "umi test",
    "test:component": "umi test ./src/components",
    "test:e2e": "node ./tests/run-tests.js",
    "tsc": "tsc --noEmit"

文件夹结构

目录结构#

我们已经为你生成了一个完整的开发框架，提供了涵盖中后台开发的各类功能和坑位，下面是整个项目的目录结构。

├── config                   # umi 配置，包含路由，构建等配置
├── mock                     # 本地模拟数据
├── public
│   └── favicon.png          # Favicon
├── src
│   ├── assets               # 本地静态资源
│   ├── components           # 业务通用组件
│   ├── e2e                  # 集成测试用例
│   ├── layouts              # 通用布局
│   ├── models               # 全局 dva model
│   ├── pages                # 业务页面入口和常用模板
│   ├── services             # 后台接口服务
│   ├── utils                # 工具库
│   ├── locales              # 国际化资源
│   ├── global.less          # 全局样式
│   └── global.ts            # 全局 JS
├── tests                    # 测试工具
├── README.md
└── package.json

启动完成后会自动打开浏览器访问 http://localhost:8000，你看到下面的页面就代表成功了。

页面代码结构推荐

为了让项目代码组织更加规范，让开发能够更方便的定位到相关页面组件代码，我们定义了一套规范，该规范当前只作为推荐的指导，并非强制。

src
├── components
└── pages
    ├── Welcome        // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── components // 对于复杂的页面可以再自己做更深层次的组织，但建议不要超过三层
    |   ├── Form.tsx
    |   ├── index.tsx  // 页面组件的代码
    |   └── index.less // 页面样式
    ├── Order          // 路由组件下不应该再包含其他路由组件，基于这个约定就能清楚的区分路由组件和非路由组件了
    |   ├── index.tsx
    |   └── index.less
    ├── user           // 一系列页面推荐通过小写的单一字母做 group 目录
    |   ├── components // group 下公用的组件集合
    |   ├── Login      // group 下的页面 Login
    |   ├── Register   // group 下的页面 Register
    |   └── util.ts    // 这里可以有一些共用方法之类，不做推荐和约束，看业务场景自行做组织
    └── *              // 其它页面组件代码

所有路由组件（会配置在路由配置中的组件）我们推荐以大驼峰命名打平到 pages 下面第一级（复杂的项目可以增加 group 层级，在 group 下放置 pages）。不建议在路由组件内部再嵌套路由组件 - 不方便分辨一个组件是否是路由组件，而且不方便快速从全局定位到路由组件。

我们推荐尽可能的拆分路由组件为更细粒度的组件，对于多个页面可能会用到的组件我们推荐放到 src/components 中，对于只是被单个页面依赖的（区块）组件，我们推荐就近维护到路由组件文件夹下即可。在我们刚刚开始跑起来项目之后就能看到一个界面，虽然简单的开发已经可以了，但是如果我们懂一些基础知识会让我们的开发更加顺畅，debug 也会更加简单。

使用到的web技术栈

web 技术是指通过 JavaScript，HTML，css 来构建网站的技术，mdn 提供了相当方便的文档来帮助我们学习这些知识。

Node.js 前端开发基础环境

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行时，Node.js 的出现极大的推动了 javascript 的工程化。Node.js 已经是当前前端开发的基础环境，也是任何工作流开始的地方。

Webpack 前端必学必会的打包工具

Webpack 可以帮助我们完成一些任务。比如 js 压缩、css 压缩、编译模板文件等等，从而减少前端的工作量。当然，Webpack 功能很强大，能帮我们完成的工作远远不止这些。如果我们使用 umi 可以极大的简化 webpack 的配置，但是仍然推荐了解一下基础知识，方便 debug 和自定义一些配置。

React Router 路由库

React Router 是一个基于 React 之上的强大路由库，它可以让你向应用中快速地添加视图和数据流，同时保持页面与 URL 间的同步。 React Router 可以把 location 转化成一个 state，帮助我们管理路由相关的所有状态。

proxy 反向代理工具

随着开发越来越偏向的前后端分离，我们在开发中不可避免地会碰到跨域的问题。proxy 就可以完美反向代理的问题，作为 webpack-dev-server 的主打功能之一， proxy 可以帮助我们代理到任何服务器，解决开发中碰到的跨域问题。

dva 轻量级的应用框架

dva 首先是一个基于 redux 和 redux-saga 的数据流方案，然后为了简化开发体验，dva 还额外内置了 react-router 和 fetch，所以也可以理解为一个轻量级的应用框架。

fabric 严格但是不严苛的 lint 规则集

pro 内置了 fabric 作为了编码规范，fabric 提供了严格但是不严苛的 lint 规则集，包含 eslint，stylelint，prettier 三种工具，可以显著的提升代码质量，规范代码风格。

TypeScript 带类型的 JavaScript

TypeScript 是 javascript 的超集，TypeScript 不仅包含 JavaScript 的语法，同时还提供了静态类型检查和更完善的代码提示功能。任何现有的 JavaScript 程序都是合法的 TypeScript 程序，只需要简单的学习，就可以获得更佳的开发体验。

Ant Design 前端组件库

Ant Design 是一套企业级 UI 设计语言和 React 组件库。作为西湖区最好的组件库，它极大的提升了中后台开发的效率，广受国内外开发者的喜爱。

Ant Design Chart简单好用的 React 图表库

Ant Design Charts 是开箱即用、易于配置、具有良好视觉和交互体验的通用统计图表库，基于 g2 的高交互可视化图形语法的同时预设了配置，一个组件即可实现多种复杂的图表。

ProComponents 模板组件

ProComponents 相比于 Ant Design 更加标准化，作为模板组件一个组件就可以搭建一个页面，在牺牲部分自由度的情况下，让 CRUD 的效率百倍提升。如果你的项目中表格和表单占主导，那么推荐使用 ProComponents 来完成开发。

useModel 简易数据流

简易数据流一种基于 hooks 范式的简易数据管理方案（部分场景可以取代 dva），通常用于中台项目的全局共享数据。在中后台开发中我们往往不需要共享很多数据，只需要用户信息或者后端下发的部分数据，简易数据流和初始化数据即可解决百分之 90 的场景，使用起来成本更低，更加自然。

运行时和编译时

Pro 的底座基于 umi， umi 与 webpack 相比增加了运行时相关的能力，我们在开发中有时候可能难以区分。

编译时指的是代码在编译的时候做的事情，这个阶段的环境一般是 node 环境，可以使用 fs，path 等功能。但是同时因为没有使用 webpack ，所以 jsx，引入图片等非 node 的能力是无法使用的。
运行时是指代码已经编译完成开始运行的阶段，这个阶段一般是浏览器环境，不能使用 fs，path 等功能，访问 url 也会有跨域的问题，但是这个环境被 webpack 编译过，所以可以写 jsx，导入图片等功能。

Umi 的插件

plugin-access，权限管理
plugin-locale，国际化能力
plugin-antd，整合 antd UI 组件
plugin-initial-state，初始化数据管理
plugin-model，基于 hooks 的简易数据流
plugin-layout，配置启用 ant-design-pro 的布局
plugin-request，基于 umi-request 和 umi-hooks 的请求方案
plugin-analytics，统计管理

如果不喜欢 umi 默认的配置，可以在这里看看有没有你喜欢的配置。如果还是不能满足就要自定义 webpack 了，chainWebpack 可以自定义内置的 webpack 配置。

webpack 对于 node 也是有版本需求的，不同 webpack 对 node 版本的依赖也不同，所以最好的办法是升级到最新的长期维护版本。

接下来你可以修改代码进行业务开发了，我们内建了典型业务模板、常用业务组件、模拟数据、HMR 实时预览、状态管理、国际化、全局路由等等各种实用的功能辅助开发，你可以继续阅读和探索左侧的其他文档。

插件使用说明

如何开发插件

Umijs配置使用说明

如何做编译提速

提升编译性能-如何做编译提速

配置 `nodeModulesTransform` 为 `{ type: 'none' }`

// config文件夹下的config.ts 文件下

查看包结构

OOM 内存溢出的处理方法

通过 NODE_OPTIONS 设置内存上限
如果出现 OOM，也可以通过增加内存上限尝试解决。比如 `NODE_OPTIONS=--max_old_space_size=4096` 设置为 4G。

// "start": "cross-env UMI_ENV=dev NODE_OPTIONS=--max_old_space_size=4096 umi dev",
// "build": "node --max_old_space_size=9000 build/build.js "

# 升级 antd pro 项目到 umi@3

Ant Design Pro -V5,---笔录--Reat（Umi.js）

Ant Design Pro

开始使用前言

包管理器

运行时和编译时

Umi 的插件

前序准备#

安装#

文件夹结构

目录结构#

页面代码结构推荐

使用到的web技术栈

Node.js 前端开发基础环境

Webpack 前端必学必会的打包工具

React Router 路由库

proxy 反向代理工具

dva 轻量级的应用框架

fabric 严格但是不严苛的 lint 规则集

TypeScript 带类型的 JavaScript

Ant Design 前端组件库

Ant Design Chart简单好用的 React 图表库

ProComponents 模板组件

useModel 简易数据流

运行时和编译时

Umi 的插件

如何做编译提速

配置 nodeModulesTransform 为 { type: 'none' }

查看包结构

OOM 内存溢出的处理方法

配置 `nodeModulesTransform` 为 `{ type: 'none' }`