【我要做开源】Vue DevUI开源指南08:Monorepo改造

【我要做开源】Vue DevUI开源指南08:Monorepo改造
前端组件库 @ 华为

0 上期直播回顾

上一次带着大家将【Vue DevUI开源指南】系列直播1-6期的所有内容串起来了,并诞生了mini-vue-devui项目,mini-vue-devui是一个迷你版的组件库产品,目前包含:

  1. vite+vue3+ts+jsx+sass的基础工程
  2. 基于vitepress+vitepress-theme-demoblock的文档系统
  3. jest+@vue/test-utils的单元测试环境
  4. 一个用jsx编写的初版Tree组件
  5. 一个初版devui-cli脚手架

直播的最后,我们快速过了一下单元测试环境搭建的流程,但并没有手把手教,而是留了一个作业,这个作业最后由QbjGKNick同学率先提交。

上一次直播的文章:

  1. 手把手带你从0到1搭建一个vue3组件库:mini-vue-devui
  2. 【我要做开源】给 vue devui 组件库项目增加单元测试

但这就是一个组件库的全部了吗?

这只是冰山一角而已。

这一期我们将继续之前的直播,完善mini-vue-devui项目,增加Monorepo支持,并打通组件库按需构建的流程。

1 为什么要做 monorepo 改造

1.1 启动 mini-vue-devui

# 克隆代码仓库到本地
git clone https://github.com/57code/mini-vue-devui.git

# 安装依赖
yarn // or npm i

# 本地启动
yarn docs:dev // or npm run docs:dev
复制代码

效果如下:

image.png

1.2 lerna 简介

image.png

lerna官网这种图很形象地表示了lerna是做什么的:

整个多头龙的身体代表单体仓库,每个龙头代表一个个的子包,每个子包是独立的(每个龙头有自主意识),独立测试、独立启动、独立构建、独立部署互不影响。

简单来说,lerna就是一个用于管理具有多个包的JavaScript项目的工具。

我们一起来看看怎么使用lerna,并使用yarn+lerna将我们的mini-vue-devui项目改造成monorepo形式。

参考:

  1. lerna 官网:lerna.js.org/
  2. 源码:github.com/lerna/lerna

1.3 mini-vue-devui 目前的目录结构

mini-vue-devui
├── devui // vue devui 组件库
├── devui-cli // devui cli 脚手架工具
├── docs // vitepress 文档系统
├── index.html
├── jest.config.js
├── lib
├── node_modules
├── package-lock.json
├── package.json
├── public
├── README.md
├── src
├── tsconfig.json
├── vite.config.ts
└── yarn.lock
复制代码

可以看到:

  1. devui // vue devui 组件库
  2. devui-cli // devui cli 脚手架工具
  3. docs // vitepress 文档系统

这三个最关键的模块都放在根目录下面,这样显得很混乱,并且不方便子模块的扩展,比如以后想做一个

  • eslint-config-plugin
  • 或者devui-vscode-plugin
  • 或者vue-devui-admin
  • 又或者是react-devui

这些子模块应该放在哪里呢?

如果全部放在根目录下,将会一片混乱,不可维护。

如果每一个都拆成一个代码仓库,又会存在

  • 代码复用的问题
  • 仓库的依赖重复安装的问题
  • 仓库之间切换的成本

这就是lerna发挥价值的地方。

2 如何使用 lerna 将 mini-vue-devui 改造成 monorepo 方式?

2.1 全局安装 lerna

npm i lerna -g

复制代码

2.2 初始化 lerna 工程

创建mini-vue-devui目录,在根目录下执行

lerna init
复制代码

配置lerna.json文件

{
  "packages": [
    "packages/*"
  ],
  "version": "0.0.0",
  "npmClient": "yarn", // 新增,使用 yarn 包管理工具
  "useWorkspaces": true // 新增,使用 yarn workspaces
}
复制代码

配置package.json

{
  "name": "mini-vue-devui",
  "private": true,
  "devDependencies": {
    "lerna": "^4.0.0"
  },
  
  // 新增,配置 packages 目录
  "workspaces": [
    "packages/*"
  ]
}
复制代码

2.3 添加子包

lerna create devui-vue -y
复制代码

mini-vue-devui中的全部文件拷贝到packages/devui-vue目录中。

2.4 安装依赖

lerna bootstrap
复制代码

2.5 本地启动

lerna exec --scope mini-vue-devui yarn docs:dev
复制代码

启动成功!

2.6 构建

lerna exec --scope mini-vue-devui yarn docs:build
复制代码

构建成功!

3 抽离 devui-cli

测试下功能

// 构建cli文件
lerna exec --scope mini-vue-devui yarn cli:build

// 执行cli命令,创建组件模板
lerna exec --scope mini-vue-devui yarn cli
复制代码

创建 devui-cli 子包

lerna create devui-cli -y
复制代码

packages/devui-vue/devui-cli中的全部文件拷贝到packages/devui-cli目录中。

再次测试功能

// 构建cli文件
lerna exec --scope mini-vue-devui yarn cli:build

// 执行cli命令,创建组件模板
lerna exec --scope mini-vue-devui yarn cli
复制代码

运行正常!

DevUI 开源招募

加入DevUI开源生态建设你将收获什么?

直接的价值:

  1. 通过打造一个实际的vue3组件库项目,学习最新的Vite+Vue3+TypeScript+JSX技术
  2. 学习从0到1搭建一个自己的组件库的整套流程和方法论,包括组件库工程化、组件的设计和开发等
  3. 为自己的简历和职业生涯添彩,参与过优秀的开源项目,这本身就是受面试官青睐的亮点
  4. 结识一群优秀的、热爱学习、热爱开源的小伙伴,大家一起打造一个伟大的产品

长远的价值:

  1. 打造个人品牌,提升个人影响力
  2. 培养良好的编码习惯
  3. 获得华为云DevUI团队的荣誉&认可和定制小礼物
  4. 成为PMC&Committer之后还能参与DevUI整个开源生态的决策和长远规划,培养自己的管理和规划能力
  5. 未来有更多机会和可能

DevUI开源,未来可期!

添加DevUI小助手微信:devui-official,拉你到我们的官方交流群。

这是我们的开源故事:

DevUI开源的故事

分类:
前端
分类:
前端