搭建组件私有仓库 - Hexo
Git仓库当私有npm
我们通常通过 npm 来安装和使用开源的库。
但是，通常我们有些私有的模块，更新不频繁，不想通过npm发布，但是又想在多个项目中使用，同时我们不想将组件库复制到各个项目中来使用。而且一旦公有模块更新，我们也不能及时更新。
利用现有的git，既不用搭建私有的npm私有仓库，又能满足上面的需求，它做为一个快速解决方案, 后期是可以慢慢过渡升级到使用完整 npm 私有仓库
项目地址：http://[ip]/wonders-ui
私有组件库搭建
安装
"@wonders-ui/mobile": "git+http://[ip]/wonders-ui/mobile.git"
使用
import Vue from 'vue'
import wondersUI from '@wonders-ui/mobile'
Vue.use(wondersUI)
注意
不好的地方是，使用 npm update / yarn 是无法更新这个@wonders-ui/mobile"，想更新只能重新安装一次，或者使用下面命令。
yarn add git+http://[ip]:[password]@[ip]/wonders-ui/mobile.git
管理组件库
@wonders-ui/web使用storybook来管理组件库
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-T4kuTnPM-1661826574097)(…/images/2.png)]
简述
- 可以帮助构建 UI 组件，组合组件，说明文档，测试和部署 UI 组件的工具，与业务功能隔离开来，专注于开发组件。
- 支持框架 React，Vue等
- 提供丰富的插件供开发使用，比如docs可以生产组件参数说明（参数描述，参数定义，支持的类型等）， knobs 帮助您在隔离构建UI组件时 可以动态地修改组件的参数来验证交互; notes可以展示你的md文档； addon-storysource可以直接在页面看到你的源码；一键生成所有截图的Storybook Chrome Screenshot Addon。这些社区的addons都非常实用。感兴趣可以自己增加
- 支持模拟不同设备下的组件
- jest自动化测试组件还有依靠视觉,快照和视觉回归测试
- 灵活度很高，如果想使用js/ts，css,/scss/styled-components, redux 都是可以的，在其他组件库基础上进行二次开发，需要自行配置项目
运行
- git clone
- yarn
- yarn storybook