在项目之间共享 react ts 组件的其他方式
Other way to share react ts components between projects
我一直在寻找一种方法来主要在专为 SPFX 和 Fluent ui 的项目之间共享一些代码。我们找到了 3 种主要方法。
1。
创建组件库似乎是最简单的方法，因为它使用相同的基础结构，并且无需配置即可完成所有构建。
但这增加了一些问题，我们需要 built 并在本地手动 link 解决方案以使其工作，如果我们放入 repo，这也将工作。所以这减轻了。
第二个是隐含地这也将要求 uire 流利的 ui 并做出反应。加上必须将它放在 SPFX 组件库项目中。
2。
我在 ts 中看到了一些使用路径的承诺，并且在使用 ts 编译器时效果很好。它将转到您的项目所引用的文件夹，并在调用时 build 它。这很棒。但它在 SPFX 中不起作用。
3。
另一种方法是安装 post 来同步文件夹，这看起来很简单，但我想知道这有多实用以及人们是如何做到的，如果是的话，怎么做。
我现在想弄清楚的是一种获取我的组件代码并共享它们的方法，就好像它们在我的 src 的文件夹中或代码的简单扩展中一样。不需要额外的依赖或 build 步骤，只需要可以用作 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'
如果它需要在我们使用它之前build 文件是可以的，但是我们可以在build 时间或安装包时做吗？也不会通过使两个模块都依赖于已经可用的东西（反应，流畅ui）来增加我的包大小吗？
考虑到 Microsoft 在 SharePoint 和 Teams 中构建包加载的方式 - 我相信 SPFX 组件库是在不同解决方案之间共享代码的最佳方式，特别是如果您希望最小化包大小...
假设您有一个可重复使用的库：一个表单，一组标准品牌组件 - 具有这种性质的东西。您可以将您的共享代码放入存储库并添加对它的引用——通过公开发布您自己的存储库或使用 npm install git+https://yourUrl 语法；但实际发生的是，您的代码被拉入每个项目的 node_modules，并且任何引用的模块代码都包含在您的包中。如果您在同一页面上有两个、三个、四个或更多 Web 部件 - 使用这些相同的库，您将乘以页面上包含该代码的次数。
但是，如果您按照 Microsoft's guide 设置组件库项目，您的 npm link 命令允许您的类型在使用项目中被识别，而无需实际包含捆绑的分发代码。您可以将您的库代码部署到 App Catalog 一次，如果它在其他解决方案中被引用——它会根据需要加载到页面上：一次。
我发现开发体验有时很不稳定，但它确实有效。当我 运行 gulp clean 在我的库代码上，或者一段时间后回来看它时，我有时发现我需要再次 运行 npm link 和 npm link my-project-name按照上述教程中的说明。每当您 运行 gulp build 在您的库上时，您还应该重建使用该库的项目，方法是使用 gulp build / bundle 或保存文件（如果您是 运行宁gulp serve)。这个过程非常适合开发，一旦到了部署的时候，您需要做的就是在 package.json 中添加对您的库的命名引用，然后将两个 .sppkg 文件部署到您的 App Catalog。
关于您的最后一个问题：包大小 - React 实际上并未包含在 SPFX 库项目的依赖项中，但您会发现它可以使用。当你构建你的库时，如果你查看 dist 文件夹中生成的 javascript，你会看到它与 react-dom 一起被列为 webpacked 内容的依赖项之一，并且ControlStrings。它在第 1 行。
office-ui-fabric-react 作为一个 devDependency 包含在内，这要归功于 @microsoft/sp-webpart-workbench 包，它与所有 SPFX 项目一起构建 - 如果你检查你的库的 dist javascript，你将看到包含的组件正在被 webpacked 并包含在您的包中。我不完全确定当您将此代码拉入您的消费项目时，webpack 是否会进行 tree-shakes 以删除重复数据并确保只包含必要的代码：我不知道。其他人可能能够在那里照亮我们或提供更准确的解释......如果有人发表评论让我知道，我会更新此回复。
最后，这更像是一种个人工作方式，但可能值得考虑：
在开发库时，我有时会通过本地 npm install ../filepath 命令在其他项目中引用它。这确保当我按照描述安装库时，使用项目安装任何必要的依赖项。如果需要，我可以调整这两个项目。部署时，我将我的更改提交到两个项目，将我的库代码部署到 App Catalog，然后 npm uninstall 来自消费项目的库并添加引用，如上述教程所述。当我部署使用我的库的项目时，它们就可以正常工作。
我最近开发了一个使用 pnpjs 的库，特别是用于与 SharePoint 对话的 @pnp/sp 库。如果您查看该库的 入门 指南，他们希望您在设置期间传递对应用程序定制器或 Web 部件 context 的引用，或者使用base URL 等等——当然，库实际上并没有任何类型的页面上下文——这段代码的全部意义在于它是可重用的。所以这是一个挑战。我的解决方案是在使用的 Web 部件中进行设置，并确保它们将对 sp 对象（类型为 SPRest）的引用传递给我的任何代码或组件图书馆。我的库对那些 pnp 库具有 peerDependencies，因此代码不会在使用项目中重复。有时，您必须考虑您的库需要在其捆绑包中包含哪些内容，以及您期望消费解决方案已经拥有哪些内容，并且可能想方设法确保不包含不需要的内容。
例如，在您谈到的场景中，您可能希望确保 fluentui 或 office-ui-fabric-react 只是您图书馆的 devDependencies 或 peerDependencies。只要您的库和使用您的库的项目都使用正确的版本，您就不会有任何问题，并且您可以在库文档中记录任何先决条件。您可以根据您当前使用的 SPFX 版本检查安装了这些库的哪些版本。 SPFX v1.11 或 v1.12 等。只需 运行 npm ls <packagename> 获取细分，或检查您的 package.json 文件。
我一直在寻找一种方法来主要在专为 SPFX 和 Fluent ui 的项目之间共享一些代码。我们找到了 3 种主要方法。
1。 创建组件库似乎是最简单的方法，因为它使用相同的基础结构，并且无需配置即可完成所有构建。
但这增加了一些问题，我们需要 built 并在本地手动 link 解决方案以使其工作，如果我们放入 repo，这也将工作。所以这减轻了。 第二个是隐含地这也将要求 uire 流利的 ui 并做出反应。加上必须将它放在 SPFX 组件库项目中。
2。 我在 ts 中看到了一些使用路径的承诺，并且在使用 ts 编译器时效果很好。它将转到您的项目所引用的文件夹，并在调用时 build 它。这很棒。但它在 SPFX 中不起作用。
3。 另一种方法是安装 post 来同步文件夹，这看起来很简单，但我想知道这有多实用以及人们是如何做到的，如果是的话，怎么做。
我现在想弄清楚的是一种获取我的组件代码并共享它们的方法，就好像它们在我的 src 的文件夹中或代码的简单扩展中一样。不需要额外的依赖或 build 步骤，只需要可以用作 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'
如果它需要在我们使用它之前build 文件是可以的，但是我们可以在build 时间或安装包时做吗？也不会通过使两个模块都依赖于已经可用的东西（反应，流畅ui）来增加我的包大小吗？
考虑到 Microsoft 在 SharePoint 和 Teams 中构建包加载的方式 - 我相信 SPFX 组件库是在不同解决方案之间共享代码的最佳方式，特别是如果您希望最小化包大小...
假设您有一个可重复使用的库：一个表单，一组标准品牌组件 - 具有这种性质的东西。您可以将您的共享代码放入存储库并添加对它的引用——通过公开发布您自己的存储库或使用 npm install git+https://yourUrl 语法；但实际发生的是，您的代码被拉入每个项目的 node_modules，并且任何引用的模块代码都包含在您的包中。如果您在同一页面上有两个、三个、四个或更多 Web 部件 - 使用这些相同的库，您将乘以页面上包含该代码的次数。
但是，如果您按照 Microsoft's guide 设置组件库项目，您的 npm link 命令允许您的类型在使用项目中被识别，而无需实际包含捆绑的分发代码。您可以将您的库代码部署到 App Catalog 一次，如果它在其他解决方案中被引用——它会根据需要加载到页面上：一次。
我发现开发体验有时很不稳定，但它确实有效。当我 运行 gulp clean 在我的库代码上，或者一段时间后回来看它时，我有时发现我需要再次 运行 npm link 和 npm link my-project-name按照上述教程中的说明。每当您 运行 gulp build 在您的库上时，您还应该重建使用该库的项目，方法是使用 gulp build / bundle 或保存文件（如果您是 运行宁gulp serve)。这个过程非常适合开发，一旦到了部署的时候，您需要做的就是在 package.json 中添加对您的库的命名引用，然后将两个 .sppkg 文件部署到您的 App Catalog。
关于您的最后一个问题：包大小 - React 实际上并未包含在 SPFX 库项目的依赖项中，但您会发现它可以使用。当你构建你的库时，如果你查看 dist 文件夹中生成的 javascript，你会看到它与 react-dom 一起被列为 webpacked 内容的依赖项之一，并且ControlStrings。它在第 1 行。
office-ui-fabric-react 作为一个 devDependency 包含在内，这要归功于 @microsoft/sp-webpart-workbench 包，它与所有 SPFX 项目一起构建 - 如果你检查你的库的 dist javascript，你将看到包含的组件正在被 webpacked 并包含在您的包中。我不完全确定当您将此代码拉入您的消费项目时，webpack 是否会进行 tree-shakes 以删除重复数据并确保只包含必要的代码：我不知道。其他人可能能够在那里照亮我们或提供更准确的解释......如果有人发表评论让我知道，我会更新此回复。
最后，这更像是一种个人工作方式，但可能值得考虑：
在开发库时，我有时会通过本地 npm install ../filepath 命令在其他项目中引用它。这确保当我按照描述安装库时，使用项目安装任何必要的依赖项。如果需要，我可以调整这两个项目。部署时，我将我的更改提交到两个项目，将我的库代码部署到 App Catalog，然后 npm uninstall 来自消费项目的库并添加引用，如上述教程所述。当我部署使用我的库的项目时，它们就可以正常工作。
我最近开发了一个使用 pnpjs 的库，特别是用于与 SharePoint 对话的 @pnp/sp 库。如果您查看该库的 入门 指南，他们希望您在设置期间传递对应用程序定制器或 Web 部件 context 的引用，或者使用base URL 等等——当然，库实际上并没有任何类型的页面上下文——这段代码的全部意义在于它是可重用的。所以这是一个挑战。我的解决方案是在使用的 Web 部件中进行设置，并确保它们将对 sp 对象（类型为 SPRest）的引用传递给我的任何代码或组件图书馆。我的库对那些 pnp 库具有 peerDependencies，因此代码不会在使用项目中重复。有时，您必须考虑您的库需要在其捆绑包中包含哪些内容，以及您期望消费解决方案已经拥有哪些内容，并且可能想方设法确保不包含不需要的内容。
例如，在您谈到的场景中，您可能希望确保 fluentui 或 office-ui-fabric-react 只是您图书馆的 devDependencies 或 peerDependencies。只要您的库和使用您的库的项目都使用正确的版本，您就不会有任何问题，并且您可以在库文档中记录任何先决条件。您可以根据您当前使用的 SPFX 版本检查安装了这些库的哪些版本。 SPFX v1.11 或 v1.12 等。只需 运行 npm ls <packagename> 获取细分，或检查您的 package.json 文件。