refactor: add pnpm workspace

[zhangpaopao0609]

🤔 这个 PR 的性质是？

• 日常 bug 修复
• 新特性提交
• 文档改进
• 演示代码改进
• 组件样式/交互改进
• CI/CD 改进
• 重构
• 代码风格优化
• 测试用例
• 分支合并
• 其他

🔗 相关 Issue

#4987

💡 需求背景和解决方案

1. feat: workspace

📝 更新日志

• feat: workspace

• 本条 PR 不需要纳入 Changelog

[github-actions]

[zhangpaopao0609]

关于重构为 workspace 过程中遇到的问题和解决方案

这里会整理过程遇到的所有问题，包含上述评论中的问题，都会在这里记录和回答

问题 1：无法解析 @tdesign/common

将 ../../common/... 重构为 @tdesign/common 后，无法解析

1. 在 .ts .tsx 文件中无法解析 @tdesign/common

• 问题原因

  在 .ts .tsx 文件中， rollup 解析 import {xxx} from '@tdesign/common' 时未能正确按照 node 解析模块算法解析 @tdesign/common

• 解决方案

  使用 @rollup/plugin-node-resolve 库并且添加 .ts .tsx 到 extensions 中。因为默认情况下插件只会在以下这些文件中生效

  • 默认情况：
    

  • 修改即可：
    

  为什么之前没有问题呢？也有引用 vue lodash 之类的呀；因为呀，之前这些第三方库都 external 了，不需要解析

2. packages/components/**/style/index.js 中无法解析 @tdesign/common

• 问题原因

  原因如上

• 解决方案

  cssConfig(css 的 roullup 配置) 的 plugins 中添加 @rollup/plugin-node-resolve 即可
  

问题 2：打包时 @tdesign/common 路径不正确

• 问题原因

  rollup 是基于根目录打包和识别 node_modules 的，无法识别子应用下的 node_modules，因此将子应用的 @tdesign/common 当做普通文件来打包了

  这里部分是我们的猜测哈，当然也是通过实验得到的，所以不完全准确，但应该差不多

• 解决方案

  把 @tdesign/common 放到 workspace，即根目录的 package.json 安装便可以正确打包，如下图

  

  放到根目录只是一个临时方案，后续收拢出口文件后，packages/vue-next，会将这些依赖和 rollup.config.js 归拢，以此便实现更合理的依赖

问题 3：@tdesign/common 引用文件时无模块提示

如下图，输入的时候没有任何模块提示。

• 问题原因

  改成 @tdesign/common + "moduleResolution": "bundler" 后，因为 @tdesign/common 没有任何 export，所以没有模块提示

• 解决方案

  • 方案 1：在 @tdesign/common 的 package.json 中添加 export

      "exports": {
        "./*": "./*.ts"
      }

    这样提示没问题了，.ts 文件的引用也没问题了，但非 .ts 文件会出现问题，比如 .less，编译的时候会识别为 .less.ts。因此方案不可行

  • 方案 2：tdesign-vue-next allowImportingTsExtensions + common ./*:{"import": "./*"}

    

    这样提示和编译都没问题了，但问题是引用的时候要加 .ts 后缀， import TreeStore from '@tdesign/common/js/tree/tree-store.ts';。方案可行，但要加后缀，体验上不是很好

  • 方案 3：拆分为更细粒度的子应用 @tdesign/common-js 和 @tdesign/common-style

    
    • 增加 @tdesign/common-js 子应用并且添加 exports
    • 增加 @tdesign/common-style 子应用

    方案开发体验没问题，只是在引用时需要完整的文件路径，比如 import log from '@tdesign/common-js/log/index';

  最终选择方案 3，体验上好，并且能更细粒度地控制。

[zhangpaopao0609]

关于升级为 Monorepo 的项目结构讨论

时间：2025 年 2 月 7 日 18:00

结论：

1. 平铺对外出口
2. 收拢出口文件
3. 平铺组件

详细说明：

1. 平铺对外出口

   为了满足未来多个出口的目的，比如 vue-next、nuxt 等，因此将对外出口进行平铺，放置在 packages/* 下

   • packages/vue-next
   • packages/nuxt

   后续将基于 workspace 来实现对外发包

2. 收拢出口文件

   基于以下两点考虑

   • 唯一出口

     比如 site、doc 等文件。这些出口文件希望能收拢到一处，而不是分散到多处。

   • 完善输出

     比如 rollup.config.js 、 test-config 等文件。这些文件其实都是为了使得输出更加完善，因此归拢到出口中。

     什么意思呢？就是项目其实可以不用打包、不用测试等都行，都能发包，但为了更好地适应更多场景，才有了这些文件

   将所有出口文件都收拢到出口下，包含但不限于：

   • package.json： 这个自不必说，对外发包
   • rollup.config.js：打包
   • test-config：测试配置
   • site：对外官网
   • doc：贡献文档等（不同出口可能不同）
   • types：保留项

   原则：上述文件有能复用的，都会进行提取复用

[uyarn]

TODO：这个name后面也许可以再讨论讨论