在项目之间共享 react ts 组件的其他方式

问题描述

我一直在寻找一种方法来在专门用于 SPFX 和 fluent ui 的项目之间共享一些代码。我们找到了 3 种主要方法来做到这一点。

1. 创建组件库似乎是最简单的方式，因为它使用相同的基础架构，并且无需配置即可完成所有构建。

但这增加了一些问题，我们需要在本地构建并手动链接解决方案以使其工作，如果我们放入一个仓库，这也将工作。所以这得到了缓解。 第二个是隐含地，这也需要流畅的用户界面和反应。此外还必须将其放置在 SPFX 组件库项目中。

2. 我在 ts 中看到了一些使用路径的承诺，这在使用 ts 编译器时工作正常。它将转到您的项目所指的文件夹并在调用时构建它。这很棒。但它在 SPFX 中不起作用。

3. 另一种方法是进行安装后同步文件夹，这似乎很容易，但我想知道这有多实用，以及人们是如何做的，如果是，如何做。

我现在想弄清楚的是一种获取我的组件代码并共享的方法，就好像它们在我的 src 文件夹或代码的简单扩展中一样。不需要额外的依赖或构建步骤，只需可以用作 ts/tsx 文件的代码。例如：

共享库：

//assuming I have react and fluentui already installed for the project.
import button from 'fluentui';
export const fancyCustomButtom = (props) => {
    return (<Button text="Standard" />);
};

src 项目文件夹：

import {fancyCustomButtom} from 'shared-lib'

如果它需要在我们可以使用它之前构建文件，那很好，但是我们可以在构建时或安装包时进行吗？通过使两个模块都依赖于已经可用的东西（react、fluentui），它不会增加我的包大小吗？

解决方法

考虑到 Microsoft 在 SharePoint 和 Teams 中构建包加载的方式 - 我相信 SPFX 组件库是在不同解决方案之间共享代码的最佳方式，特别是如果您希望最小化包大小...

想象一下，您有一个可重复使用的库：一个表单、一组标准品牌组件 - 具有这种性质的东西。您可以将共享代码放入存储库并添加对它的引用 - 通过公开发布您自己的存储库或使用 npm install git+https://yourUrl 语法；但实际上发生的是，您的代码被下拉到每个项目的 node_modules 中，并且任何引用的模块代码都包含在您的包中。如果您在同一页面上有两个、三个、四个或更多 Web 部件 - 使用这些相同的库，您就会成倍增加该代码包含在页面上的次数。

但是，如果您按照 Microsoft's guide 设置组件库项目，您的 npm link 命令允许您的类型在消费项目中被识别，而无需实际包含捆绑的分发代码。您可以将您的库代码一次部署到应用程序目录，如果它在其他解决方案中被引用 - 它会根据需要加载到页面上：一次。

我发现开发体验有时很不稳定，但确实有效。当我在我的库代码上运行 gulp clean 时，或者在一段时间后返回它时，我有时会发现我需要按照上述教程中的说明再次运行 npm link 和 npm link my-project-name .每当您在库上运行 gulp build 时，您还应该重建使用该库的项目，方法是使用 gulp build / bundle 或保存文件（如果您正在运行 gulp serve）。此过程适用于开发，一旦需要部署，您只需在 package.json 中添加对您的库的命名引用，然后将这两个 .sppkg 文件部署到您的应用程序目录。

就您的最后一个问题而言：包大小 - 反应实际上并未包含在 SPFX 库项目的依赖项中，但您会发现它可以使用。构建库时，如果查看 dist 文件夹中生成的 javascript，您会看到它与 react-dom 和 {{1} 一起列为 webpacked 内容的依赖项之一}.它在第 1 行。

ControlStrings 作为 devDependency 包含在内，这要归功于 office-ui-fabric-react 包与所有 SPFX 项目一起构建 - 如果您检查库的 @microsoft/sp-webpart-workbench javascript，您将看到包含的组件是被 webpacked 并包含在你的包中。我不完全确定当您将此代码拉入您的消费项目时，是否 webpack 然后摇树以消除重复并确保仅包含必要的代码：我不知道。其他人可能会在那里为我们提供启发或对正在发生的事情提供更准确的解释...如果有人发表评论让我知道，我会更新此回复。

最后，这更像是一种个人的工作方式，但可能值得考虑： 在开发库时，我有时会通过本地 dist 命令在其他项目中引用它。这确保当我按照描述安装库时，使用项目会安装任何必要的依赖项。如果需要，我可以调整这两个项目。到了部署时，我将更改提交到两个项目，将我的库代码部署到应用程序目录，然后npm install ../filepath 来自消费项目的库并添加一个参考，如上述教程中所述。当我部署使用我的库的项目时，它们就可以正常工作。

我最近开发了一个使用 npm uninstall 的库，特别是用于与 SharePoint 对话的 pnpjs 库。如果您查看该库的入门指南，他们希望您在设置期间传递对应用程序定制器或 Web 部件 @pnp/sp 的引用，或者使用基本 URL 进行显式设置等等——当然，一个库实际上并没有任何类型的页面上下文——这段代码的全部意义在于它是可重用的。所以这是一个挑战。我的解决方案是在消费 Web 部件中进行设置，并确保它们将对 context 对象（类型为 sp）的引用传递给我的任何代码或组件。图书馆。我的库在这些 SPRest 库上具有 peerDependencies，因此代码不会在使用项目中重复。有时，您必须考虑您的库需要在其包中包含哪些内容，以及您希望使用的解决方案已经拥有哪些内容，并可能想办法确保不包含不需要的内容。

例如，在您谈论的场景中，您可能希望确保 pnp 或 fluentui 仅是您图书馆的 office-ui-fabric-react 或 devDependencies。只要您的库和使用您的库的项目都使用正确的版本，您就不会遇到任何问题，并且您可以使用库文档记录任何先决条件。您可以根据当前使用的 SPFX 版本检查安装了这些库的哪些版本，即。 SPFX v1.11 或 v1.12 等。只需运行 peerDependencies 以获得细分，或检查您的 npm ls <packagename> 文件。