1

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

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

但这增加了一些问题，我们需要在本地构建并手动链接解决方案以使其工作，如果我们放入 repo，这也将工作。所以这被减轻了。第二个是隐含地这也需要流利的用户界面和反应。加上必须将其放置在 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）来增加我的包大小吗？

4

1 回答 1

0

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

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

但是，如果您遵循Microsoft关于设置组件库项目的指南，您的npm link命令允许在使用项目时识别您的类型，而无需实际包含捆绑的分发代码。您可以将您的库代码一次部署到 App Catalog，如果它在其他解决方案中被引用 - 它会根据需要加载到页面上：一次。

我发现开发体验有时非常不稳定，但它确实有效。当我gulp clean在我的库代码上运行或一段时间后返回它时，有时我发现我需要按照上述教程中的说明再次npm link运行。npm link my-project-name每当您在库上运行时，您还应该通过使用或保存文件（如果您正在运行）gulp build来重建使用该库的项目。这个过程非常适合开发，一旦需要部署，您需要做的就是在里面添加一个对库的命名引用，然后将这两个文件部署到您的 App Catalog。gulp build / bundlegulp servepackage.json.sppkg

关于您的最后一个问题：捆绑大小 - 反应实际上并未包含在 SPFX 库项目的依赖项中，但您会发现它可以使用。当您构建您的库时，如果您查看dist文件夹中生成的 javascript，您会看到它被列为 webpacked 内容的依赖项之一以及react-dom和ControlStrings。它在 1 号线。

office-ui-fabric-react多亏了@microsoft/sp-webpart-workbench与所有 SPFX 项目一起搭建的包，它作为 devDependency 包含在内 - 如果您检查库的distjavascript，您将看到包含的组件正在 webpacked 并包含在您的包中。我不完全确定当你将这段代码拉入你的消费项目时，webpack 是否会进行树状抖动以消除重复并确保只包含必要的代码：我不知道。其他人可能能够在那里照亮我们或更准确地解释正在发生的事情......如果有人评论让我知道，我将更新此回复。

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

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

例如，在您谈论的场景中，您可能希望确保fluentuior office-ui-fabric-reactare only devDependenciesor peerDependenciesfor your library。只要您的库和使用您的库的项目都使用正确的版本，您就不会有任何麻烦，并且您可以使用库文档记录任何先决条件。您可以根据您当前使用的 SPFX 版本检查安装了这些库的哪些版本，即。SPFX v1.11 或 v1.12 等。只需运行npm ls <packagename>以获取故障，或检查您的package.json文件。

于 2021-04-21T00:57:40.740 回答