Better

Ethan的博客，欢迎访问交流

Ant Design Pro 初探

作者:刘新琼 | 日期:2019-07-17 20:44 | 标签:React 浏览(1) 留言(0)

最近公司后管系统，决定使用 Ant Design Pro 使用，总的来说，在 React 现有生态上造了一些轮子，提供中台常见布局，对于开发中常见的场景提供了他们认为的最佳实现，在这里小小的总结一下，来自于文档！

介绍

Ant Design Pro 是开箱即用的中台前端/设计解决方案。致力于在设计规范和基础组件的基础上，继续向上构建，提炼出典型模板/业务组件/配套设计资源，进一步提升企业级中后台产品设计研发过程中的『用户』和『设计者』的体验。

社区情况

  • star 2w
  • latest release 2019.6.8

优势

  • 提炼中后台应用的典型页面场景
  • 响应式
  • 国际化
  • 所谓的最佳实践

技术栈准备：UmiJS、dva、g2

简单看了一下一下所有的文档之后，感觉 Ant Design Pro 从构建到开发，我们都会碰到得场景就有考虑到，下面简单总结一下

构建

通常项目都会区分好几套环境，通常我们会在环境变量中添加一个标识位，然后通过 process.env 获取对应的值，在 Node 中我们可以直接这么做，但在 JS 中，该变量是 Webpack mock 出来的对象，你自定义的变量默认不会帮你注入，通常我们会使用到 DefinePlugin 来达到这个目的，在这里我们只需要修改 config 下 define 配置即可。

由于环境变量是直接使用，不会通过 window 对象的方式来使用，在 eslint 和 TypeScript 中都会报错。

  • eslint 中可以通过增加 globals 的配置来处理报错
  • TypeScript 可以在typings.d.ts 中进行定义

在部署中，也可能碰到一些问题

  • 部署到非根目录，需要在 config 中配置 publicPath
  • 前端路由的配置

开发

针对开发中常见的场景，进行了抽象。

路由、布局

常见中台左侧一般会有一个菜单，在这里将菜单和面包屑，根据路由自动生成，因为我们需要一个中心化的路由配置，同样在 config.ts 中配置

菜单：根据 config.ts 自动生成，如不需要，可以在 BasicLayout 中设置 menuRender 属性为 false

使用面包屑

  • 组件 PageHeaderWrapper 内置
  • RouteContext 提供的信息自定义

脚手架默认提供了两种布局，我们也可以新增自己的布局，在脚手架中我们通过嵌套路由来实现布局模板。

  • 基础布局 - BasicLayout
  • 账户布局 - UserLayout

除了 Pro 里内置布局外，也可以使用 Ant Design 提供的两套布局组件工具：Layout 和 Grid。

区块

我们开发一个页面，通常步骤：创建 JS -> 创建 CSS -> 创建 Model -> 创建 service -> 写页面组件，Pro 提供了快捷命令初始化区块（Pro 提供的概念），这里传递出几个信息

  • 页面级别子组件，同级创建 components 文件夹储存
  • 数据结构定义同级创建 data.d.ts
  • 操作 dva 数据流在同级 model.ts 中
  • service.ts 直接定义在页面组件中，并没有放置在最外层的 services 文件夹

关于 dva 数据流和 service 位置，文档中没有透露出强烈的信息，demo 中两种方式均有使用

样式

默认使用 less 作为样式语言，默认使用 CSS Modules。如果想要一个全局样式，可以使用 :global，几个注意事项

  • CSS Modules 只会对 className 以及 id 进行转换，其他的比如属性选择器，标签选择器都不进行处理，推荐尽量使用 className。
  • 由于不用担心类名重复，你的 className 可以在基本语意化的前提下尽量简单一点儿。

有时候对 antd 组件样式不满意，会有覆盖组件样式的需求，步骤如下

  • 引入的 antd 组件类名没有被 CSS Modules 转化，所以被覆盖的类名 .ant-select-selection 必须放到 :global 中。
  • 因为上一条的关系，覆盖是全局性的。为了防止对其他 Select 组件造成影响，所以需要包裹额外的 className 限制样式的生效范围。

服务端交互

在 Pro 中，一个完整的 UI 交互到服务端流程是这样的

  1. UI 组件交互操作；
  2. 调用 model 的 effect；
  3. 调用统一管理的 service 请求函数；
  4. 使用封装的 request.ts 发送请求；
  5. 获取服务端返回；
  6. 然后调用 reducer 改变 state；
  7. 更新 model。

dva 基于 redux-saga 进行了一次封装，这里需要额外学习一下！

数据 mock，Pro 中，因为我们的底层框架是 umi，而它自带了代理请求功能，通过代理请求就能够轻松处理数据模拟的功能。直接在 mock 文件夹下创建数据即可。

如果数据结构比较复杂，可以借用辅助生成模拟数据的第三方库，比如 mockjs。

使用插件模拟延迟：roadhog-api-doc

关闭 mock 数据：npm run start:no-mock

进阶

更多 Pro 提供的高阶特性。

图表、图标

Pro 在基于 BizCharts 图表库基础上的二次封装上提供了丰富的图表类型。

如果 Ant Design Pro 不能满足你的业务需求，可以直接使用 BizCharts 封装自己的图表组件。

针对图标我们可以使用 Ant Design 官方图标，也可以在 iconfont.cn 上采集并生成自己的业务图标库

有三种引入方式供你选择：SVG Symbol、Unicode 及 Font class。我们推荐在现代浏览器下使用 SVG Symbol 方式引入。

SVG 符号引入是现代浏览器未来主流的图标引入方式。

  • 支持多色图标，不再受到单色图标的限制
  • 通过一些技巧，支持像字体那样，通过 font-size、color 来调整样式
  • 支持 IE 9+ 及现代浏览器

有两种方式使用图标

  • 传统方式
    • 复制代码地址
    • 加入图标样式代码
    • 挑选相应图标并获取类名
  • 使用 Icon.createFromIconfontCN({...}) 方法来更加方便地使用图标

国际化

Pro 通过 umi-plugin-locale 来实现全球化的功能，并且默认开启，约定在 src/locales 中引入相应的 js。

umi-plugin-locale 封装了 react-intl，全部 api 如下

  • formatMessage
  • setLocale
  • getLocale
  • FormattedMessage

主题

config.ts 中 theme 字段可以自定义 Ant Design 主题。

defaultSetting.ts 可设定一些全局效果

测试

Ant Design Pro 封装了一套简洁易用的 React 单元测试和 E2E 测试方案。

单元测试

  • enzyme：提供了大量实用的 API 来帮助我们测试 React 组件
  • jest

e2e 测试：puppeteer，Google Chrome 团队官方的无界面（Headless）Chrome 工具。它默认使用 chrome / chromium 作为浏览器环境运行你的应用，并且提供了非常语义化的 API 来描述业务逻辑。

权限控制

Pro 结合路由配置中的 Routes 属性和权限控制组件，实现了基本的权限控制功能。

留言