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

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

问题分析

现象

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

影响

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

期望

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

要求

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

未来

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

问题

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

调研结果

参考链接

相关链接

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);

组件库开发计划.jpg

更新联动

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

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

人生不过一场空,我不灿烂谁灿烂

526 声望
17 粉丝
0 条评论
推荐阅读
用vue3+vite重构小项目
2.0.0项目说明该项目为web单页面应用,核心功能为显示时间。技术栈使用 pnpm、Vite、Vue3、typescript、tailwind、github/api功能需求显示时间显示随机壁纸每日热词录入非功能需求移动端自适应查看日前时间详细属...

Mulander阅读 3.9k

JavaScript有用的代码片段和trick
平时工作过程中可以用到的实用代码集棉。判断对象否为空 {代码...} 浮点数取整 {代码...} 注意:前三种方法只适用于32个位整数,对于负数的处理上和Math.floor是不同的。 {代码...} 生成6位数字验证码 {代码...} ...

jenemy46阅读 5.8k评论 12

从零搭建 Node.js 企业级 Web 服务器(十五):总结与展望
总结截止到本章 “从零搭建 Node.js 企业级 Web 服务器” 主题共计 16 章内容就更新完毕了,回顾第零章曾写道:搭建一个 Node.js 企业级 Web 服务器并非难事,只是必须做好几个关键事项这几件必须做好的关键事项就...

乌柏木65阅读 6k评论 16

再也不学AJAX了!(二)使用AJAX ① XMLHttpRequest
「再也不学 AJAX 了」是一个以 AJAX 为主题的系列文章,希望读者通过阅读本系列文章,能够对 AJAX 技术有更加深入的认识和理解,从此能够再也不用专门学习 AJAX。本篇文章为该系列的第二篇,最近更新于 2023 年 1...

libinfs39阅读 6.3k评论 12

封面图
从零搭建 Node.js 企业级 Web 服务器(一):接口与分层
分层规范从本章起,正式进入企业级 Web 服务器核心内容。通常,一块完整的业务逻辑是由视图层、控制层、服务层、模型层共同定义与实现的,如下图:从上至下,抽象层次逐渐加深。从下至上,业务细节逐渐清晰。视图...

乌柏木42阅读 7.2k评论 6

CSS 绘制一只思否猫
欢迎关注我的公众号:前端侦探练习 CSS 有一个比较有趣的方式,就是发挥想象,绘制各式各样的图案,比如来绘制一只思否猫?思否猫,SegmentFault 思否的吉祥物,是一只独一无二、特立独行、热爱自由的(>^ω^&lt...

XboxYan42阅读 2.9k评论 14

封面图
从零搭建 Node.js 企业级 Web 服务器(二):校验
校验就是对输入条件的约束,避免无效的输入引起异常。Web 系统的用户输入主要为编辑与提交各类表单,一方面校验要做在编辑表单字段与提交的时候,另一方面接收表单的接口也要做足校验行为,通过前后端共同控制输...

乌柏木33阅读 6.1k评论 9

人生不过一场空,我不灿烂谁灿烂

526 声望
17 粉丝
宣传栏