Voic NPM | npm.io

voic 组件库管理工具

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

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

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

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

组件遵循原则

单个组件目录即为组件的最小粒度单元，设计时不应该有依赖于目录之外的冗余。
sdk 目录下的组件尽量打包编译压缩，react 组件则尽量不要编译压缩，应该跟随项目打包编译。
组件目录下必须包含 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	必需，作者