将客户端 Web 部件部署到 SharePoint 页面（Hello World 第 3 部分）

项目
04/08/2023

在开始之前，请确保已完成以下文章中的步骤：

也可以观看 Microsoft 365 平台社区 (PnP) YouTube 频道上的这段视频，按照以下步骤操作：

打包 HelloWorld Web 部件

在控制台窗口中，转到在生成首个 SharePoint 客户端 Web 部件中创建的 Web 部件项目目录。
```
cd helloworld-webpart
```
如果 gulp 服务仍在运行，则通过选择 CTRL+C 使其停止运行。

与在 Workbench 中不同，必须向 SharePoint 部署和注册 Web 部件，才能在新式 SharePoint 服务器端页面中使用客户端 Web 部件。首先，需要打包 Web 部件。

在 Visual Studio Code 或首选 IDE 中，打开“HelloWorldWebPart”Web 部件解决方案。

打开“config”文件夹中的“package-solution.json”。

package-solution.json 文件定义包元数据，如下面的代码所示：

{
"$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
"solution": {
    "name": "mysolution-client-side-solution",
    "id": "ee1a495d-c7bb-499b-bd71-728aaeb79cd2",
    "version": "1.0.0.0",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": true,
    "isDomainIsolated": false,
    "developer": {
    "name": "",
    "websiteUrl": "",
    "privacyUrl": "",
    "termsOfUseUrl": "",
    "mpnId": "Undefined-1.14.0"
    },
    "metadata": {
    "shortDescription": {
        "default": "mysolution description"
    },
    "longDescription": {
        "default": "mysolution description"
    },
    "screenshotPaths": [],
    "videoUrl": "",
    "categories": []
    },
    "features": [
    {
        "title": "mysolution Feature",
        "description": "The feature that activates elements of the mysolution solution.",
        "id": "d72e47b2-d5a2-479f-9f9a-85e1e7472dee",
        "version": "1.0.0.0"
    }
    ]
},
"paths": {
    "zippedPackage": "solution/mysolution.sppkg"
}
}

在控制台窗口中，输入以下命令以捆绑客户端解决方案：
```
gulp bundle
```
在控制台窗口中，输入以下命令，打包包含 Web 部件的客户端解决方案：
```
gulp package-solution
```
该命令将创建以下包：./sharepoint/solution/helloworld-webpart.sppkg。

包内容

包使用 SharePoint 功能打包 Web 部件。默认情况下，gulp 任务为 Web 部件创建功能。

可以在 ./sharepoint/solution/debug 文件夹中查看原始包内容。

然后，将内容打包到 .sppkg 文件中。包格式类似于 SharePoint 加载项包，并遵循 Microsoft 开放打包约定打包解决方案。

如果使用 --ship 选项，JavaScript 文件、CSS 和其他资产一起打包到包内。不过，在本教程中，我们将先通过 localhost 托管 JavaScript 文件，从而测试部署和功能。自动打包和托管选项将在下一个教程中介绍。

注意

自 SharePoint 框架 v1.4 起，静态资产默认打包到 sppkg 包内。如果在应用程序目录中部署包，资产自动通过 Office 365 CDN（若启用）或应用程序目录 URL 进行托管。可以使用 package-solution.json 文件中的 includeClientSideAssets 设置控制此行为。

将 HelloWorld 包部署到应用程序目录

接下来，需要将已生成的包部署到应用程序目录。

注意

如果没有应用程序目录，SharePoint Online 管理员可以按照本指南中的说明创建一个应用程序目录：使用应用程序目录使自定义商业版应用可供 SharePoint Online 环境使用。

转到网站的应用程序目录。
如果在应用目录中看到经典体验，请选择通过单击在标头中的 尝试使用新“管理应用”页面 来移动新体验
将 helloworld-webpart.sppkg 上传或拖放到应用程序目录中。

这会部署客户端解决方案包。由于这是完全信任的客户端解决方案，因此 SharePoint 显示对话框，并提示信任要部署的客户端解决方案。
选择“部署”。

注意，通过查看应用程序目录中的“应用包错误消息”列，可以看到包中是否存在任何异常或问题。

在网站上安装客户端解决方案

转到开发人员网站集或要用于测试的网站集
选择顶部导航栏右侧的齿轮图标，再选择“添加应用”，转到“应用”页面。
在“搜索”框中，输入 helloworld，再按 ENTER 筛选应用。
选择“helloworld-webpart-client-side-solution”应用，在网站上安装此应用。

此时，客户端解决方案和 Web 部件安装在开发人员网站上。

“网站内容”页显示客户端解决方案的安装状态。请务必先确保安装已完成，再转到下一步。

在 SharePoint 页面上预览 Web 部件

至此，已部署并安装客户端解决方案。是时候将 Web 部件添加到 SharePoint 页面了。请记住，JavaScript 和 CSS 等资源是本地计算机提供的，因此，除非你的 localhost 正在运行，否则 Web 部件的呈现将会失败。

从dist文件夹中打开{{your-webpart-guid}}.manifest.json。

请注意，loaderConfig 项中的 internalModuleBaseUrls 属性仍引用本地计算机：
```
"internalModuleBaseUrls": [
  "https://localhost:4321/dist/"
],
```
将 Web 部件添加到 SharePoint 服务器端页面之前，先运行本地服务器。
在包含 helloworld-webpart 项目目录的控制台窗口中，运行 gulp 任务，从 localhost 开始提供服务：
```
gulp serve --nobrowser
```
注意

--nobrowser 不会自动启动 SharePoint Workbench，因为在这种情况下不需要，我们将在 SharePoint 页面中托管 Web 部件。

将 HelloWorld Web 部件添加到新式页面

在浏览器中，转到安装解决方案的网站。
依次选择顶部导航栏右侧的齿轮图标和“添加页面”。
编辑页面。
打开 Web 部件选取器，再选择“HelloWorld”Web 部件。

注意

屏幕截图来自使用现代体验的网站。

此时，将会从本地环境加载 Web 部件资产。必须启用浏览器以加载不安全脚本，才能加载本地计算机上托管的脚本。请务必为此会话启用加载不安全脚本，具体视使用的浏览器而定。

应该会看到上一篇文章中生成的 HelloWorld Web 部件（用于从当前网站检索列表）。

新式页面中的 Hello World Web 部件

编辑 Web 部件属性

选择 Web 部件中的“配置元素”图标（笔），打开 Web 部件的属性窗格。

这与在 Workbench 中生成和预览的属性窗格相同。
编辑“说明”属性，输入“客户端 Web 部件真是太棒了!”
请注意，行为仍相同，如在用户键入的同时更新 Web 部件的反应窗格。
选择“x”图标，关闭客户端属性窗格。
在工具栏上，选择“保存并关闭”，保存此页面。

后续步骤

恭喜！ 已将客户端 Web 部件部署到新式 SharePoint 页面。

可以在下一主题通过 Office 365 CDN 托管客户端 Web 部件中继续生成 HelloWorld Web 部件。下一主题将介绍如何通过 Office 365 CDN（而不是 localhost）部署和加载 Web 部件资产，这意味着你正在准备的解决方案将用于运输或用于生产环境。

通过