开始搭建组件库项目

105 阅读1分钟

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