🏗️ TDesign Vue Mono Repo

[zhangpaopao0609]

Discussed in #4247

^{Originally posted by zhangpaopao0609 June 3, 2024}

标题

将 tdesign-vue-next 改造成 monorepo，同时支持 vue2/vue3 的组件版本发布，减少重复开发的成本，提高同步效率；
同时承载 nuxt 模块、chat 等组件的代码开源

背景

为什么要改造成单仓？

1. vue23 仓库整合，使用一套 UI 来实现。

   这就需要基于单仓来进行整合

   https://github.com/TDesignOteam/tdesign-vue-integrate （测试仓库）
   至于为什么还要维护 vue2？项目起点是服务腾讯司内业务，目前公司统计到还有近30%的项目使用vue2

这里有个问题？就是，整合 vue23 就一定要单仓吗？似乎非单仓也能实现？那为什么要采用单仓呢？

答：我们要改，确实用不用 workspace 都可以，但不用的话，结构同样需要重新安排，因为现在的结构下肯定是无法实现整合的。既然结构要改我们完全可以利用workspace的机制来帮助我们更好的管理和发包。
在不用单仓的情况下，管理会相对更麻烦一些，同时，发包也会变得非常麻烦

2. 单仓非常契合我们的仓库

   • ui + submodule 的结构与单仓可谓一致
   • 多栈 + common

3. 单仓其它的优势

   • 复用
   • 发包
   • 依赖管理

改造方案

逐步改造为 Mono Repo 的仓库结构，尽可能不影响其他开发者的代码合入

• 见 monorepo label的所有相关PR: https://github.com/Tencent/tdesign-vue-next/issues?q=is%3Aissue%20state%3Aclosed%20label%3Amonorepo

改造为 Mono Repo 后，加入 Adapter 层

• Adapter 层验证分支：https://github.com/Tencent/tdesign-vue-next/tree/feature/monorepo

ps：vue3(@td/adapter-vue3)指：文件夹名为 vue3，括号里的内容为包名 @td/adapter-vue3

• configs：仓库多处使用的配置

  • ts-config(@td/ts-config)
  • eslint-config(@td/eslint-config)

• sites：官网

  • site-base(@td/site-base )：官网基础模板，主要抽离官网可复用逻辑
  • vue3(@td/site-vue3)
  • vue2.7(@td/site-vue2.7)

• internal：供仓库各处使用的内部包

  • vue-babel-preset-jsx(@td/vue-babel-preset-jsx)：增强的 vue2-jsx，用于编译 vue3 语法到 vue2.7 vnode
  • vite-base(@td/vite-base)：vite 基础配置
  • build-utils(@td/build-uitls)：构建相关的工具

• packages：仓库主要包

  • tdesign-vue-next(tdesign-vue-next)：td next 包，组件导出入口
  • tdesign-vue(tdesign-vue)
  • components：承载 UI
    • @td/components-common 公共 UI
    • @td/components-vue3 vue3 独有的 UI
    • @td/components-vue2.7
  • adapter：适配层
    • vue(@td/adapter-vue)：适配 vue，组件所需要的 vue api 均从这个包导出
      • vue3(@td/adapter-vue3)：底层包，使用者无需关心
      • vue2.7(@td/adapter-vue2.7)
    • hooks(@td/adapter-hooks)：适配 hook，组件所需要的 hooks 均从这个包导出
      • common(@td/adapter-hooks-common)：公共的 hooks，即不需要适配
      • vue3(@td/adapter-hooks-vue3)
      • vue2.7(@td/adapter-hooks-vue2.7)
  • utils(@td/utils) utils，与框架无关
  • locale(@td/locale) 多语言
  • types(@td/types) 公共类型
  • common(@td/common，即原 submodule)
  • test(@td/test) 测试

目前存在的问题

1. 结构有些分离

   • 问题：types、props example 等文件在 tdesign-vue-next 目录下，而 UI 却在 components / common / vue3 / vue2.7 下，在 UI 结构上有些分离。

     至于为什么这么放置，是因为 vue3 和 vue2 的这些本身就不同，无法整合

   • 解决方案

     这里不讨论 types、props example 和 UI 文件放在一起是否合理，这里是与之前做对比

     利用文件结构引导开发者，减少开发者的开发感知

     

2. 文件结构冗余

   • 问题：tdesign-vue-next 下有 src 各组件，components 也有
   • 解决方案： 暂无解决方案，只能与问题 1 一样，减少开发者感知

注意事项

1. 注意保留历史记录
   所有的改动都需要通过 Git 操作，这样才能保留历史记录。

• 文件挪动，直接使用 git mv 可能丢掉历史记录，需要如下方可

  target=$1
  dest=$2
  
  mkdir temp
  git mv $target temp
  mkdir -p $dest
  git mv -k temp/* $dest
  rm -rf temp

[github-actions]

👋 @zhangpaopao0609，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。