使用 SharePoint 框架中的库组件类型生成解决方案

项目
06/29/2022

在本教程中，你将创建一个 SharePoint 框架 (SPFx) 库组件，并在客户端 Web 部件中使用它。

如何创建第三方 SPFx 库

在你最喜爱的位置创建新的项目目录
```
md corporate-library
```
转到项目目录
```
cd corporate-library
```
通过运行 Yeoman SharePoint 生成器创建新库
```
yo @microsoft/sharepoint
```
出现提示时，请输入以下值（为下面省略的所有提示选择默认选项）：
- 是否要允许租户管理员选择能够立即将解决方案部署到所有网站的选项而无需运行任何网站中的部署或添加应用程序功能?：是
- 要创建哪种类型的客户端组件？：库
- 你的库名称是什么？：CorporateLibrary
- 你的库说明是什么？：CorporateLibrary 说明
一旦搭建项目基架，你将看到使用包含从创建的 CorporateLibrary 导出的 index.ts 文件创建的库。
在收藏夹编辑器中打开解决方案，然后导航到 src/corporateLibrary/CorporateLibraryLibrary.ts

你将注意到已创建默认方法 name()。重命名此方法，如下所示：

public getCurrentTime(): string {
  return 'The current time as returned from the corporate library is ' + new Date().toTimeString();
}

在命令提示符下运行 gulp 以查看所有内容构建正常。

如何使用第三方 SPFx 库（用于本地测试）

从库解决方案的根目录运行 gulp bundle --ship。简单的 gulp build 不起作用。
从库解决方案的根目录运行 npm link。在本例中，它可能来自 corporate-library 文件夹。
将符号链接创建到新的 SPFx 库组件之后，不要忘记至少运行一次 gulp build。至少编译一次库组件，以便能够将其作为模块导入不同的项目。请记住，package.json 表示 "main": "lib/index.js"，因此，该位置需要在任何导入尝试之前一直存在。
这将创建一个指向该库的本地 npm 链接，其名称已在 package.json 中提供。
在 单独的项目文件夹（而不是在库项目文件夹结构） 中创建 Web 部件项目，按照此处的说明操作。将 Web 部件命名为 CorporateWebPart。
从新 Web 部件文件夹的根目录，运行命令 npm link corporate-library
这将创建指向 Web 部件中本地构建的库的符号链接，并使其可用于 Web 部件。
在首选编辑器中打开 Web 部件解决方案，然后导航到 src/webparts/corporateWebPart/CorporateWebPartWebPart.ts

添加导入以引用你的库：

import * as myLibrary from 'corporate-library';

更改 render() 方法，如下所示：

public render(): void {
  const myInstance = new myLibrary.CorporateLibraryLibrary();

  this.domElement.innerHTML = `
  <div class="${ styles.corporateWebPart }">
      <div class="${ styles.container }">
      <div class="${ styles.row }">
          <div class="${ styles.column }">
          <span class="${ styles.title }">Welcome to SharePoint!</span>
          <p class="${ styles.subTitle }">Customize SharePoint experiences using Web Parts.</p>
          <p>${myInstance.getCurrentTime()}</p>
          <a href="https://aka.ms/spfx" class="${ styles.button }">
              <span class="${ styles.label }">Learn more</span>
          </a>
          </div>
      </div>
      </div>
  </div>`;
}

请注意，我们正在创建库的新实例，然后引用 getCurrentTime() 方法从库中检索当前时间字符串。

通过启动本地工作台并将 Web 部件添加到页面来测试 Web 部件：
```
gulp serve
```

如何从租户应用程序目录部署和使用第三方 SPFx 库

导航到 corporate-library 根文件夹，以捆绑并打包解决方案：
```
gulp bundle --ship
gulp package-solution --ship
```
这将生成所做的任何本地更改，并将解决方案打包到位于 sharepoint/solution 文件夹中的 *.sppkg 文件中。
在租户应用程序目录中部署此包，并通过选中“向组织中的所有站点提供此解决方案”选项使其在租户范围内部署。
导航到 Web 部件解决方案文件夹，然后打开 ./package.json 文件。
添加一个条目以将库条目及其版本反映到 dependencies 部分（可以在之前创建的库解决方案的 package.json 文件中找到它），如下所示：
```
"dependencies": {
  "corporate-library": "0.0.1", // here we added the reference to the library
  "@microsoft/sp-core-library": "1.9.0",
  "@types/webpack-env": "1.13.1",
  "@types/es6-promise": "0.0.33"
},
```
备注

如果你创建 Web 部件，刚刚添加了对 package.json 的引用，且未使用 npm link 创建本地引用，则 npm install 会引发错误。如果你使用 npm link 创建了链接并运行 npm install，则在 npm install 期间不会收到错误，但会删除符号链接。如果要运行 npm install，则必须暂时删除对公司库的引用，并通过运行 npm link corporate-library 重新建立引用并更新 package.json 中的引用。

生成 Web 部件：

gulp bundle --ship
gulp package-solution --ship

将 Web 部件解决方案部署到租户应用程序目录。
将新添加的 Web 部件添加到页面，并注意该库可自动用于 Web 部件功能。
对库进行任何更改并再次将库发布到应用程序目录，这将自动更新 Web 部件，而无需重新生成/重新发布 Web 部件。

如何取消链接 SPFx 库

要取消链接在SPFx 项目中开发期间建立了符号链接的 SPFx 库，请导航到 SPFx 项目根文件夹并运行相关命令。

npm unlink corporate-library

检查 SPFx 库的文件夹位置。

npm ls -g 'corporate-library'

要删除到该库的本地 npm 链接，请导航到 SPFx 库根文件夹并运行相关命令。

npm unlink

另请参阅

在 SharePoint Framework 中使用库组件类型

通过