Fitfitfitfitfit NPM

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

项目相关地址

待补充

技术栈

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ɪtv. (形状和尺寸)适合，合身; (大小、式样、数量适合)可容纳，装进; 试穿(衣服);adj. 健壮的; 健康的; (质量、素质或技能)适合的，恰当的，合格的; 可能(或准备)做某事至极端程度;

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

antd

@everything-registry/sub-chunk-1676 @zalastax/nolb-fit

1.0.0

3 years ago

fitfitfitfitfit v1.0.0

fit

任务