voic 组件库管理工具

万物声前端组件库管理工具，非统一库，而是组件的命令管理工具， 用于管理业务相关或通用组件的 modules，方便开发者快速在项目引入需要的通用组件或文件。



 之前采用过的组件库方案:

1. 前端技术团队封装通用组件库，如万物声 SASS 平台的前端架构方案 voi。但有缺点，如果是基于 React 或 antd 封装，会导致库本身打包出来体积过大，同时在引用到项目中增加了编译之后的文件大小。
2.  建立一个统一的 git 仓库，由所有开发同学  共同维护。缺点也很明显，组件更新非自动化， 应用到项目中仍然需要手动拷贝。
3.  所有组件均上传至前端私有库 xnpm。与方案 2 比引用方便，但是仍然存在方案 1 的问题，依赖体积过大。

封装通用组件库更适合于脱离使用第三方 UI 库（antd) 的业务场景，开发自身系统统一的 UI 风格的组件。

 所以基于实际的业务场景和现有的开发模式， 采用组件库管理工具更能提高开发效率，便于组件的管理和使用。

 组件库 npm 目录结构

├── bin                    bin命令配置
|   ├── voic.js            shell命令
├── commands               commands配置
|   ├── Ask.js             ask类
|   ├── Copy.js            copy类
|   ├── Down.js            down类
|   ├── Finder.js          finder类
|   ├── List.js            list类
├── config                 配置目录
|   ├── dev.js             开发时配置
|   ├── index.js           默认配置
|   └── prod.js            打包时配置
├── lib                    React原生组件、React-UI库组件
|   ├── ClamperUpload      **组件名
|   |   ├── index.js       组件js
|   |   ├── info.json      组件配置，包含name,sdk,updateTime,description,alias,author字段
|   |   ├── ...            index 页面目录
|   |   ├── readme.md      组件的使用说明文档
├── sdk                    js原生组件，入口应为打包umd规范的js文件
|   ├── login              **组件名
|   |   ├── ...            index 页面目录
|   |   ├── readme.md      组件的使用说明文档
└── package.json

voic 使用文档

1. 基于 react 的组件统一放置在 react 目录下
2. 基于原生 js 的组件统一放置在 sdk 目录下

组件遵循原则

1.  单个组件目录即为组件的最小粒度单元，设计时不应该有依赖于目录之外的冗余。
2. sdk 目录下的组件尽量打包编译  压缩，react 组件则尽量不要编译压缩，应该跟随项目打包编译。
3.  组件目录下必须包含 info.json 文件，该文件为组件的说明和配置文件，示例:

{
  "name": "ClampUpload",
  "tag": "react",
  "updateTime": "2019-04-09",
  "description": "风控上传组件",
  "alias": ["login"],
  "author": "nardo.li"
}

字段说明

| 字段 | 类型 | 说明 | | ----------- | ------ | -------------------- | | name | string | 必需， 组件名称 | | tag | string | 必需， 组件库  目录 | | updateTime | string | 可选， 更新时间 | | description | string | 必需， 描述 | | alias | array | 可选，暂不支持，依赖 | | author | string | 必需， 作者 |

安装

yarn global add voic

命令

voic ls

 查看组件库所有组件列表，以表格形式展现

voic ls -r

查看 react 组件库

voic ls -s

查看 js 组件库

voic add ClampUpload

下载ClampUpload组件到当前目录

voic add ClampUpload LoginForm

下载ClampUpload, LoginForm组件，可同时下载无限个，参考yarn add规则