---
name: 开发文档
route: /dev
menu: General
---

## package.json命令说明

- **start**： 启动开发环境
- **pubWithIcon**： （修改了Icon Svg源的情况下）构建组件库 -> 升级组件库依赖子包（Icon）的版本并且发布 -> 更新组件库依赖的Icon的版本号 -> 升级组件库版本号 -> git推送并发布
- **pub**： （没有修改Icon Svg源的情况下）构建组件库 ->  升级组件库版本号 -> git推送并发布
- **build:doc**： 构建组件库文档网站并且推送到内网
- **build:icon**： 修改了Icon Svg输入源，执行该命令构建新的Svg Component
- **gen**： 自动生成组件模板，例如输入 `npm run gen upload`, 即可在`src/components`文件夹下生成名为`Upload`组件的模板文件，在 `src/docs`下生成对应的文档模板

## 注意事项⚠️
- 组件中引用Icon组件，不要通过相对路径引用，需要引用单独抽离出的[kwai-icon](http://git.corp.kuaishou.com/ks-ad/ad-fe/kwai-ui/blob/master/src/components/breadcrumb/index.tsx#L3)，因为icon组件较大，打包过程单独抽离，否则按需加载组件的时候，Icon会duplicate在所有引用过它的组件中
- 所有在多个组件中引用到的外部依赖，注意在package.json中设置为[external](http://git.corp.kuaishou.com/ks-ad/ad-fe/kwai-ui/blob/master/package.json#L71)，react-cli会在打包的时候读取并且自动external指定的包

## 开发准则
- 使用Typescript开发，确保没有TS错误，尽量精确的类型定义
- 使用[Hooks API](https://reactjs.org/docs/hooks-reference.html)实现组件逻辑
- 使用[Styled Components](https://styled-components.com/)开发样式
- 不要覆盖HTML element原生属性，https://developer.mozilla.org/en-US/docs/Web/HTML/Element
- 最小嵌套，在满足组件功能的前提下，使用最小的嵌套元素，避免无意义嵌套


## 参考资料

- 项目地址：http://git.corp.kuaishou.com/ks-ad/ad-fe/kwai-ui
- UI切图地址：http://pac.test.gifshow.com/
- 组件库在线文档：http://ss.test.gifshow.com/