Graviti-design NPM

Graviti Design

如你所见，这是一个组件库

Documents

文档见：http://ui-demo.graviti.cn:3330/

使用 Dumi 自动生成文档

Development

Demo 均使用 Dumi 生成，具体可参考 https://d.umijs.org/zh-CN

yarn dev

Commit

commit 使用

yarn commit

进行提交，否则 arc land 会报错：

Some of your tasks use git add command. Please remove it from the config since all modifications made by tasks will be automatically added to the git commit index.

Publish

发布前确保你的代码是最新的哦
使用 np 控制发布，具体可参考 https://github.com/sindresorhus/np

yarn release

package.json 中 version 无需手动进行更改，按上述提示发布后会自动更新。

开发须知

1. 项目结构

├── deployment
│   └── ... (configuration files)
├── docs
│   └── index.md
├── src (Your code here)
│   ├── _util
│   ├── componentA
│   │   ├── __tests__
│   │   ├── componentA.tsx
│   │   ├── index.md
│   │   ├── index.ts
│   │   └── style
│   │       ├── index.scss
│   │       ├── index.ts
│   │       ├── mixin.scss
│   │       └── variables.scss
│   ├── componentB
│   ├── componentC
│   └── style (存放一些全局的变量（主要为主题服务）和公用 mixin/function)
│   │   ├── animations
│   │   │   ├── index.scss
│   │   │   └── spin.scss
│   │   ├── colors
│   │   │   ├── colorPalette.scss
│   │   │   └── colors.scss
│   │   ├── index.scss
│   │   ├── mixins
│   │   │   ├── index.scss
│   │   │   ├── reset-component.scss
│   │   │   └── typography.scss
│   │   └── themes
│   │       └── default.scss
│   └── index.ts
├── gulpfile.js
├── ...
...

组件都在 src/ 文件夹内，其中 style/ 文件夹下会存放一些全局的变量（主要为主题服务）和公用 mixin/function。
每一个组件文件夹内：

index.md 用来编写文档以及调试 demo
index.ts 用于导出组件
[componentA].tsx 组件本身
__tests__ 测试文件都写在这里
style/ 样式文件都在这里
style/index.ts 用于导出样式文件
style/index.scss 样式文件的入口
style/variables.scss 用于存放 sass 变量
style/mixin.scss 用于存放 sass 的 mixin

如果你足够细心的话你会发现每一个组件的tsx文件中都有这么一行import
import './style';
这是必不可少的一行，它会在 dev 以及 build 阶段将样式文件引入到组件中，并且无关样式文件的文件类型（这一点后文会提到）

2. 新增/修改组件

本项目的组件实现基本参考 ant-design 项目，你可以发现可能很多代码都是一样的。
组件的样式由我们的UI给出，所以有一些用户交互还是会和 antd 有所不同，这部分还是需要大家有自己的思考，不要只把代码复制过来就完事了，尽量去理解 antd 的实现。

3. 编译流程

详情参考 https://juejin.cn/post/6844904160568016910#heading-15
使用 gulp 实现编译 pipeline，所以流程都可以在 gulpfile.js 中看到。

流程大致上是一致的，但是我们的项目中会有一些变化：

使用 sass 代替了 less。
没有使用 babel-plugin-import 实现按需引入，而是在编译时将 style/index.ts 中的 import 从 scss 改为了 css，实现了自动的按需引入。
只编译了 esm 和 cjs 两种输出，没有 umd 等输出格式。

所以本项目中的编译大概会分为以下几个步骤：

使用 sass库编译 scss 文件
使用 babel 编译 ts 文件，分别编译成 esm 和 cjs 格式
使用 tsc 产生类型文件 *.d.ts
使用 through2 修改引入样式文件为编译后的 css 文件，实现按需引入

4. 发布流程

直接使用 np 发布，由于在 script 中添加了 verson 这个脚本，用来执行编译流程，np 会在发布前自动执行这个脚本，所以就不需要自己再手动编译一次了。