fit

任务

https://joyspace.jd.com/page/rQ8o0lpcaAM1qpZyNR81

项目简介

健康 B 端组件库。

版本要求

node>[email protected]

项目运行

安装依赖

$ 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. 健壮的; 健康的; (质量、素质或技能)适合的，恰当的，合格的; 可能(或准备)做某事至极端程度;

健壮的：希望我们的项目是健壮的，能为各项目提供稳定的基础组件。 健康的：不用多解释 😁。