具有共享 typescript 代码的 SPFx monorepo

Question

任务是：

• 拥有多个类似的同级文件夹，每个文件夹都包含带有一个 webpart 的 spfx 项目，并且能够单独开发每个项目并为单独的部署构建每个 own.sppkg 文件。
• 拥有另一个包含共享 typescript 代码的同级文件夹，可以通过 webparts.ts 类导入（不是库，只是 ts 代码）

我们有一个带有下一个文件夹结构的 monorepo：

WebPartOne
  src
  tsconfig.json
  ...

WebPartTwo
  src
  tsconfig.json
  ...

Common
  src
  tsconfig.json
  ...

WebPartOne、WebPartTwo 是相同的，唯一的区别在于它们的 webpart 本身。 Common 文件夹包含一些 typescript 代码（常用的 React 组件、常用模型、常用服务）。

没有公共资源的工作流：启动本地工作台

gulp clean && gulp build && gulp serve

这给出了一个正常的编译库结构

webparts
  webpartone
    webpartone.webpart.manifest.json
    webpartone.webpart.js
    webpartone.webpart.d.ts
index.d.ts
index.js
...

一切都好，工作正常

具有公共资源的工作流：像这样导入共享代码

import { IHttpParams } from '../../../../Common/src/models/http.model';

当我们尝试运行时

gulp clean && gulp build && gulp serve

lib文件夹结构变成了这个

webparts
  webpartone
    --- empty --- there is no more webpartone.webpart.js
WebPartOne
  src
    ... it all goes here
Common
  src
    models
      ... compiled imported model

因此文件夹结构中断，SPFx 无法再从 lib 导入所有必要的文件并给出

找不到入口模块：错误：无法解析'C:\Users\localuser\Documents\Projects\CCP\FE\WebPartOne\lib\webparts\webpartone\webpartone.webpart.js' in 'C:\Users\localuser\Documents\Projects\CCP\FE\WebPartOne'

这种行为是预期的，因为 ts 查看更远的父文件夹，然后构建依赖于它的文件夹结构。 但能以某种方式避免吗？ 我们尝试配置 tsconfig.json-s 但没有运气，问题是 SPFx 是通过 gulp 构建的，我想在这里配置 ts 有点棘手，不像常规的 ts 项目。

有一些文章介绍了如何将公共文件构建到库中，然后导入它们，但我们只需要导入即可，即使代码会在 each.sppkg-s 中重复。 我已经花了几天的时间，但没有运气（

我很感激任何帮助。 谢谢！

Answer 1

当所有代码都在一个项目中时，我最终得到了一个解决方案，但是通过在执行这些脚本之前更改 config.json 和 package-solution.json 文件中的数据来提供和构建不同的包。 这篇文章对我有帮助！