具有共享打字稿代码的 SPFx monorepo答案

【问题标题】：SPFx monorepo with shared typescript code具有共享打字稿代码的 SPFx monorepo
【发布时间】：2020-10-27 21:23:29
【问题描述】：

任务是：

拥有多个相似的同级文件夹，每个文件夹都包含带有一个 webpart 的 spfx 项目，并且能够单独开发每个项目并构建每个自己的 .sppkg 文件以进行单独部署。
拥有另一个同级文件夹，其中包含可以由 webparts .ts 类导入的共享 typescript 代码（不是库，只是 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 项目。

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

感谢您的帮助。谢谢！

【问题讨论】：

标签： javascript typescript sharepoint-online spfx monorepo

【解决方案1】：

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

【讨论】：