fit
任务
https://joyspace.jd.com/page/rQ8o0lpcaAM1qpZyNR81
项目简介
健康 B 端组件库。
版本要求
node>=@12.18.3
项目运行
安装依赖
$ npm i启动服务
$ npm start构建文档
$ npm run docs:build构建组件库 father-build,
$ npm run build启动ant-design源代码
$ npm run start:antd项目相关文档
relay: https://relay.jd.com/web/project/ae0a3a78-fa0b-4ccb-9e83-ca0eb5ff1aa8
项目相关地址
待补充
技术栈
- antd4.x https://ant.design/
- react17.x https://github.com/facebook/react/
- dumi https://d.umijs.org
- father https://github.com/umijs/father
目录结构
-
fit 是组件库目录，这里负责生产组件和文档，具体使用规则可见 dumi。fit 目录下有 ant-design 目录，这里是 antd 源码库，版本为 4.16.10。我们会定期更新 antd，尽量第一时间和官方版本保持一致。我们在引用组件的时候直接引入 antd 就是引用的此目录下的组件(通过 umirc 配置 alias)。修改样式通过修改 ant-design/components/style/themes 下的 less 变量来重置 antd 样式。个别情况下需修改组件下的 style 样式。尽量不去修改原组件逻辑以防止同步源码时冲突，也方便使用 antd 官方的单元测试用例。antd 启动命令见 package.json
-
这个方案可能不是最好的方案，但是是最快的方案，也能保障组件的可靠性高。当开发人员熟悉 antd 的整体架构后可考虑 fork 一份源代码进行改造或在 antd 基础上进行二次封装。
fit
├─ docs
│ └─ index.md 项目插件
├─ plugin
│ └─ index.ts 项目插件
├─ src 项目源码目录
│ ├─ button
│ │ ├─ demo 每个组件的示例文件都写入到demo里
│ │ ├─ index.md 组件使用示例根
│ │ └─ index.tsx 组件统一导出文件
│ └─ index.ts 组件库统一导出文件
├─ README.md
├─ .fatherrc.ts 项目打包配置文件
├─ .umirc.ts 组件库文档配置文件
├─ package-lock.json
├─ package.json
├─ tsconfig.json
└─ typings.d.ts
antd 需要关注的文件
antd
├── components 组件目录
├── dist umd包
├── es es规范的包
├── lib commonjs规范的包
├── package-lock.json
├── package.json
├── scripts
└── webpack.config.js
开发规范
在 fit 组件进行封装时，为了避免和 antd 官网有大量的样式统一。我们使用 dumi 进行组件库官网的开发。目录规范统一按照 antd 风格。 例如： 当开发 button 组件时，组件根目录创建 index.md 进行该组件文档撰写。文档总体可分为 3 部分：
- 标题及介绍
- 代码示例
- api
- 方法
其中代码示例通过在 demo 里创建 md 来撰写。尽量每个示例一个 markdown。具体可参照 antd 组件写法。通过在 index.md 里通过 embed 标签来引入具体示例。大部分示例一期暂时手动 copy 官方示例，如果有特殊示例可以自己撰写。后期我们会通过 loader 来自动加载组件示例。
上线规范
待补充
上线流程
待补充
FAQ 问题列表和解决方案
- 为什么叫 fit？
来自百度翻译：
fit 英[fɪt] 美[fɪt]v. (形状和尺寸)适合，合身; (大小、式样、数量适合)可容纳，装进; 试穿(衣服);adj. 健壮的; 健康的; (质量、素质或技能)适合的，恰当的，合格的; 可能(或准备)做某事至极端程度;
健壮的：希望我们的项目是健壮的，能为各项目提供稳定的基础组件。
健康的：不用多解释