vlambda博客
学习文章列表

• 组件修改方式不统一
• 有的组件是直接修改源码，有的组件是引入 antd 组件后在上面封装一层
• 组件文档编写不便
• antd 内置的文档框架 bisheng 比较老旧，使用和定制成本均比较高
• 图标库和组件库联调麻烦
• 图标库和组件库是两个仓库，但图标的预览在组件库。想要联调新增或修改的图标，需要给图标库单独发版，或在本地配置 npm link

• bisheng
• antd 自带的文档工具，几乎只有 antd 自己在使用。年头较久，维护不积极
• playground:
• 主流的组件库文档工具，semi-design, arco-design 等组件库均在使用
• dumi
• 蚂蚁金服近期开源的文档工具。特点是基于 umi 生态，可以使用 umi 的插件，维护积极。同时有个最大的亮点：使用代码即文档

import React from 'react'import { Button } from 'antd'
export default function () { return ( <div> <Button type="primary">Primary Button</Button> </div> )}

• Yarn Workspace 负责依赖管理

• Lerna 负责版本管理

.├── lerna.json // lerna 配置文件└── packages // 子项目目录 ├── components // 组件库 │ ├── docs │ │ └── index.md // 组件库文档入口 │ ├── src │ ├── button │ │ ├── demos // demo 代码块 │ │ ├── index.md // 组件文档入口 │ │ ├── index.less // 组件样式 │ │ └── index.tsx // 组件(HoC) │ ├── index.ts // 组件库总入口 │ └── styles │ ├── custom.less // antd 样式变量覆盖 │ └── index.less // 样式总入口 │ ├── .fatherrc.ts // 组件库打包配置 │ └── .umirc.ts // 组件库文档打包配置 ├── icons // 图标库 └── icons-svg // SVG 基础库

• JS：生成 ESModule 的包则天然支持按需加载，我们需要在 dumi 打包配置文件中做如下配置:

export default { esm: 'babel'}

• Less：需要配合按需引入的插件，例如 Webpack 环境下使用: babel-plugin-import

"plugins": [ [ 'import', { libraryName: 'laiyed', libraryDirectory: 'lib/components', style: (module) => `${module}/index.css`, }, ],]

/** * 组件库的入口文件 */
export type { ButtonProps } from './components/button'export { default as Button } from './components/button'
// ......

组件库文档中的样式

antd 组件文档中，有部分包含手动添加的样式，例如 button 的间距等。这些样式是写在 antd 的文档工具 bisheng 的模板中，在使用脚本迁移组件库文档到 dumi 的过程会丢失。我们需要手动补足这些样式以保证文档显示效果统一（注意这是文档单独的样式，和组件的样式无关）。

/** Button */.__dumi-default-previewer[id^='button'] .ant-btn { margin-right: 12px; margin-bottom: 12px;}
.__dumi-default-previewer[id='button-ghost'] .ant-btn { margin-bottom: 0;}
.__dumi-default-previewer[id='button-ghost'] .__dumi-default-previewer-demo > div { padding: 8px; background: rgb(190, 200, 200);}
#demo-btn-disabled { padding: 8px; background: rgb(190, 200, 200);}
#demo-btn-disabled .ant-btn { margin-bottom: 0;}
/** ... */

总结

在基于 antd 定制公司内部组件库的场景，我们选型了像 dumi、monorepo 这样更先进的工具和代码组织方式，提升了组件库的开发效率和可维护性。

antd 本身未见得不了解这些改进，可能只是更多地为了兼容性，毕竟开源和公司内部使用是两个完全不同的场景，服务的开发者数量差别巨大。感谢蚂蚁金服开源了 antd 如此优秀的组件库，让我们在享受海量现成组件的同时，可以用较小的成本改造以满足自身需求。