1. 准备工作
- 给组件库起个名字,基于跨栈的特点,就叫cross-ui吧
- 组件库聚焦PC端
- 源码地址:gitee.com/bbtfe/cross…
2. 搭建工程
2.1 组件库工程应具备的特性
- 使用方能通过cdn方式引入所有组件
- 使用方能通过cdn方式按需引入组件
- 使用方能通过npm包引入组件
- 每个组件有相应的单测能力
- 有测试页面,一边写组件,一边看效果
2.2 目录结构
├── demo 测试页面
├── src 组件源码
| ├── components
| | ├── Button
| | | ├── index.tsx 组件入口
| | | ├── index.less 组件样式
| | | ├── index.test.js 组件单侧
| ├── utils 工具类
| ├── index.ts 打包入口文件
| ├── typings.d.ts ts全局配置
├── gulpfile.js gulp打包npm包
├── webpack.config.js webpack启动项目、打包cdn文件
├── tsconfig.json 项目ts配置
├── beta.js 自动生成npm包版本
├── karma.conf.js karma单测框架配置文件
├── package.json