搭建企业组件库全过程回顾

搭建企业组件库全过程回顾

问题分析

现象

项目A中复用项目B的公共组件时以纯复制粘贴的形式。

影响

• 开发效率低
• 不同项目相同组件差异维护难
• 组件关联结构复杂

期望

• 功能重用
• 业务模块解耦
• 提高工程编译速度

要求

• 组件库版本维护
• 公共组件的单元测试更有必要性

未来

• 可视化页面搭建
• 自动化测试

问题

• 开发权限
• 组件库结构
• 组件化的范围或最小颗粒度
• 组件化的拓展性
• 组件单元测试/用例测试
• ...

调研结果

参考链接

• 2018，我们的组件化实施之路
• 完全组件化框架Atoms-mvp
• 【手牵手】搭建前端组件库（一）
• 【手牵手】搭建前端组件库（二）
• 前端架构之路（7） - 私有 npm 仓库
• 在5分钟内搭建企业内部私有npm仓库

相关链接

• 一篇文章解决npm私有包频繁开发调试
• 使用karma+mocha+chai+sinon+@vue/test-utils为你的组件库增加单元测试
• vue之package.json文件解析
• Vue CLI3开发环境搭建
• (1)安装部署vuecli3.0
• icestark，一个面向大型系统的微前端解决方案

1.独立化组件+私有 npm 仓库

项目外部组件化,​企业内部私有npm仓库+本地跨项目包引用

优

• 私有包托管在内部服务器或者单独的服务器上
• 对于下载，发布，有对应的权限管理

劣（npm link能适当缓减本地联调压力）

• 版本号过多，版本号传递过程中的繁琐
• 组件库与项目间调试困难
• 需要规范的组件化开发与npm包管理学习成本

2.monorepo

在一个项目仓库 (repo) 中管理多个模块/包 (package)，不同于常见的每个模块建一个 repo

• 区分子项目依赖和公有依赖
• 体积大，重复依赖 ，考验团队

3.github/@dependencies

将组件代码托管在git上，利用git搭建内部私有库

基本同方案1，便易搭建但版本管理较差

实现过程

初步选择方案三，利用gitlab快速搭建企业私有组件库。

• 1.gitlab创建repo "XY_UI"
• 2.利用vue-cli(v4.2)生成模板项目(勾选vue-routerstorelessmocha-test...)
• 3.确定项目结构

┌──XY_UI
├────assets //  存放markdown文件中引用的图片素材
├────blackBox   //  存放草稿或临时数据
│    └────data.json
├────dist   //  存放针对src目录build后的静态文件
├────mock   //  存放模拟请求数据用例
├────node_modules   //  自有依赖|ignore
├────packages   //  对外暴露的组件包
│    ├────assets    //  开发资源（全局样式、素材等）
│    ├────components    //  单元组件
│    │      ├────button
│    │      │       ├────src
│    │      │       │     ├────style  //  存放样式表
│    │      │       │     │     └────index.less  //  核心样式
│    │      │       │     ├────xy-button.vue  //  核心视图
│    │      │       │     └────index.js  //  核心逻辑
│    │      │       ├────index.js   //  组件安装脚本
│    │      │       └────README.md  //  组件开发记录
│    │      └────README.md  //  开发规范说明
│    ├────config    //  配置文件
│    ├────modules    //  业务组件
│    ├────service    //  请求服务API
│    ├────tools    //  工具类
│    ├────plugins    //  第三方插件
│    ├────index.js    //  包安装脚本
│    └────README.md  //  组件包相关说明
├────public   //  app入口html和相关staic资源
│    ├────favicon.ico
│    └────index.html
├────src   //  app代码，提供组件的开发环境
├────test   //  test代码，负责组件的用例测试
│    ├────scene //  场景化测试（仅部分核心业务）
│    └────unit  //  单元组件测试
├────package.json   //  项目依赖和脚本指令
└────README.md  //  组件库相关说明

• 4.打上初始化tag并提交 push tag:init
• 5.整理组件化清单
• 6.丰富组件库(以button为例)

//  ../packages/components/button/index.js
import button  from './src/pow-button.vue'
button.install = function (Vue) {
    Vue.component(button.name, button )
}
export default button

//  ../packages/index.js
import config from './config'
import service from './service'
import tools from './tools'
//  单元组件
import button from './components/button'
//  业务模块
import modulesA from './modules/modulesA'
// 存储组件列表
const components = [
    button,
    modulesA,
]
// 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
const install = function (Vue) {
    // 判断是否安装
    if (install.installed) return
    // 遍历注册全局组件
    components.map(component => Vue.component(component.name, component))
}

// 判断是否是直接引入文件
if (typeof window !== 'undefined' && window.Vue) {
    install(window.Vue)
}
//  如果组件库开发计划耗时较长，可先引用部分第三方UI库
// import ViewUI from 'view-design'

export default {
    // 以下是组件的版本号
    version: '0.2.1',
    //  配置信息
    config:config,
    //  API服务初始化
    initService:service,
    //  工具类
    tools:tools,
    //  第三方UI组件
    // ViewUI:ViewUI,
    XY_UI:{
        // 导出的对象必须具有 install，才能被 Vue.use() 方法安装
        install,
        // 以下是具体的组件列表
        button,
        modulesA,
    }
}

• 7.开发命令

{
  "script":{
    "ui": "vue ui",
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "test:unit": "vue-cli-service test:unit",
    "test:scene": "vue-cli-service test:scene"
  }
}

#   vue-cli可视化脚手架
npm run ui
#   启动本地开发环境
npm run serve
#   项目src打包
npm run build
#   单元测试脚本
npm run test:unit
#   场景测试脚本
npm run test:scene

• 8.外部引用

# 主分支最新代码
npm install -S git+http://user@gitlaburl/XY_UI.git
# 主分支按tag版本下载
# npm install -S git+http://user@gitlaburl/XY_UI.git#init

import Vue from 'vue'
// 导入 XY_UI 组件包
import packages from '@company/XY_UI/packages'
console.log('XY_UI|version:',packages.version);
//  安装powerUI
packages.XY_UI.install(Vue);
// 加载工具类 
Vue.prototype.$tools = packages.tools;  
// 加载http请求api  
let API_SERVICE = packages.initService('dev');  Vue.prototype.$api = API_SERVICE;

开发规范

开发流程：

• 需求分析
• 数据层/视图层/逻辑层 设计
• 组件开发 ./button/src/Button.vue
• 添加mock_data（如果需要）
• 撰写说明文档 ./button/README.md
• 编写测试（单元测试为主） test/unit/button.spec.js
• push & notify

辅助开发：

• 每个组件单元附加一份README.md，用于开发说明和更新记录
• test中针对单元组件做相应的测试用例，测试通过后方可push

版本号维护：

• 共由三位数构成（x.x.x），用于开发鉴别版本更新以及项目落地中实现同一时期不同版本的应用需求；
• 每次push递增第三位数字（x.x.1=>x.x.2）;
• 每个开发周末添加一个tag，递增第二位数字，并清零第三位（x.1.56=>x.2.0）;
• 每个稳定交付的季度节点打一个tag，递增第一位数字，并清零第二第三位（0.1.56=>1.0.0）;

更新联动

配合git-web hooks 可以将git的push等信息同步发送至第三方

如钉钉:钉钉群机器人开发接口