antd-dev-guide

公司内部维护ant-design版本使用

开发环境

clone项目

项目地址：https://github.com/sunny-lab/ant-design

git clone https://github.com/sunny-lab/ant-design.git

开始编译

antd的组件，通过Bi Sheng这个开源项目创建的官网来展现。

在项目根目录下运行以下命令，可以启动开发环境，所有对源码（包括官网源码）的改动都会实时编译：

npm start

所以需要注意的是，antd根目录下的webpack.config.js是属于Bi Sheng项目所要求的webpack规范

并且，antd使用了antd-tools来构建工程，打包发布等流程结合了gulp+webpack功能，默认的webpack配置是包含在antd-tools的代码中的。

在常规开发中，不需要调整根目录下的webpack.config.js。

组件编写

在 components 文件夹下新建一个文件夹并以组件的名字命名，目录结构如下：

- myComponent
--- demo //代码演示
----- *.md
--- style
----- *.less
----- index.tsx //样式的入口文件
--- index.tsx //组件的入口文件
--- index.zh-CN.md //文档的入口文件

组件编写完成后在 components/index.tsx 文件里边把新加的组件 import 进来就可以了。

代码规范

每次编写组件后，需要使用npm run lint来检测是否符合代码规范。

文档编写

文档入口文件格式

---
category: Components
subtitle: 卡片
type: Data Display
title: Card
---

卡片。

## 何时使用

最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。

## API

| 参数 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |

代码演示文件格式

在 demo 文件夹下创建一个 markdown 文件，名字任意。然后以如下格式编写，每个 demo 单独一个文件。

---
order: 1
title:
  zh-CN: 普通卡片
  en-US: Normal Card
---

## zh-CN

包含标题、内容、操作区域。


//````jsx
import { Card } from 'antd';

class Container extends React.Component {
  render() {
    return <Card title="标题" extra={<a>more</a>}>测试内容</Card>
  }
}

ReactDOM.render(<Container />, mountNode);
//````

版本发布

自动化工具发布细节

antd项目发布前有一系列预处理和规范检测，基于gulp task，自动化工具的具体流程如下：

check-git：检测是否有未提交的文件，保证git工作区的干净
dist：编译es2015代码为es5代码，并且进行压缩等操作
pre-publish：运行代码规范检测，运行测试代码
npm tag：
tag：从package.json中读出版本号，执行git tag命令
github release

发布流程

确定所有的代码均已提交
确定影响范围，是否有影响用户使用方式的改动，是否有严重的bug修复，均要添加在CHANGELOG_SUNNY_LAB.md中，为了方便跟进ant-design版本，不要修改ant-design本身的CHANGELOG.md
修改package.json中的版本号，按照语义化进行修改
提交本次修改
在项目根目录下执行
```
npm run pub
```

发布网站，执行命令

rm -rf node_modules && npm i
npm run deploy

yedaodao / antd-dev-guide