练习 - SharePoint 框架项目、包和组件中的版本号

已完成

在本练习中，你将了解如何更改SharePoint 框架组件和包中的版本号，以及这会如何影响部署。

使用包版本

在本练习的这一部分，你将对在第一个练习中创建的项目进行多项更改，并查看这些更改在 SharePoint 中的显示方式，具体取决于包版本是否更改。

检查现有包版本

在浏览器中，导航到之前部署包的网站集。

在左侧导航栏中，选择 Apps for SharePoint 链接。

请注意，App version 属性的值为 1.0.0.0。 这是包版本。

找到并打开 ./config/package-solution.json 文件。

包版本由 ./config/package-solution.json 文件中 solution 对象的 version 属性定义。

向页面添加 Web 部件

导航到 SharePoint 页面。

通过选择页面上内容区域右上角的 编辑 按钮，进入编辑模式。

选择 Web 部件图标按钮以打开可用 Web 部件列表：

在“搜索”框下，选择“排序和过滤”下拉列表，然后在“按类别过滤”下面选择“高级”。

在“高级”部分中，选择“部署演示”Web 部件：

请注意现有的 Web 部件用户界面。

进行代码更改

找到 Web 部件文件 src/webparts/deploymentDemo/DeploymentDemoWebPart.ts。

在 DeploymentDemoWebPart 类中找到现有的 render() 方法。 将 render() 方法的内容替换为以下内容。 此代码显示 Web 部件的组件版本。 组件版本的值将在本练习的后面部分使用：

public render(): void {
  this.domElement.innerHTML = `
    <section class="${styles.deploymentDemo} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
      <div class="${styles.welcome}">
        <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
        <div>Web part title: <strong>${escape(this.title)}</strong></div>
        <div>Component version: <strong>${escape(this.manifest.version)}</strong></div>
      </div>
    </section>`;
}

更新部署包

通过在项目根目录中用命令行运行以下命令，生成项目：

gulp build

接下来，通过从项目的根目录运行以下命令来创建项目的生产捆绑包：

gulp bundle --ship

最后，通过从项目的根目录运行以下命令来创建项目的部署包：

gulp package-solution --ship

将包部署到 SharePoint 网站

在浏览器中，导航到之前部署包的网站集。

在左侧导航中选择“网站内容”。

在左侧导航栏中，选择 Apps for SharePoint 链接。

将在之前步骤中创建的包（位于项目的./sharepoint/solution/deployment-demo.sppkg）拖动到SharePoint 应用程序的库中。

SharePoint 将启动一个对话框，询问是否要信任该包：

选择“部署”。

部署包后，请注意包版本仍为 1.0.0.0。

检查现有 Web 部件

导航到之前添加 Web 部件的页面并刷新。

请注意，Web 部件用户界面已更改。

重新部署包时，无论包版本号是否更改，所有现有代码文件都会自动被新文件覆盖。

添加新的 Web 部件

在 SharePoint 项目的根目录中用命令行执行以下命令：

yo @microsoft/sharepoint

使用以下命令完成显示的提示（如果显示多个选项，请接受默认答案）：

• 要创建哪种类型的客户端组件?：Web 部件
• Web 部件的名称是什么？： 第二部署演示
• 要使用哪个模板？： 无框架

找到 Web 部件文件 src/webparts/secondDeploymentDemo/SecondDeploymentDemoWebPart.ts。

在 SecondDeploymentDemoWebPart 类中找到现有的 render() 方法。 将 render() 方法的内容替换为以下内容：

public render(): void {
  this.domElement.innerHTML = `
    <section class="${styles.secondDeploymentDemo} ${!!this.context.sdks.microsoftTeams ? styles.teams : ''}">
      <div class="${styles.welcome}">
        <h2>Well done, ${escape(this.context.pageContext.user.displayName)}!</h2>
        <div>Web part title: <strong>${escape(this.title)}</strong></div>
        <div>Component version: <strong>${escape(this.manifest.version)}</strong></div>
      </div>
    </section>`;
}

按照本练习前面所述的说明更新部署包并将包重新部署到网站集应用程序目录。

部署包后，请注意包版本仍为 1.0.0.0。

将新的 Web 部件添加到页面

导航到之前添加 Web 部件的页面。

通过选择页面上内容区域右上角的 "编辑 "按钮，进入编辑模式。

选择 Web 部件图标按钮以打开可用 Web 部件列表。

搜索部署。 选择“第二个部署演示”Web 部件：

请注意新的 Web 部件用户界面。

重新部署包时，添加到包的任何 Web 部件都立即可用，无论包版本号是否更改。

重要

此行为在 SharePoint 框架 v1.14.0 中已更改。 在此版本的 SPFx 之前，你需要递增包版本才能在 Web 部件工具箱中查看新的 Web 部件。 如果未使用租户范围的部署，还需要更新要在其中使用新 Web 部件的网站集中的关联应用。

添加新扩展

现在，你将向项目添加命令集扩展。 命令集扩展的部署类似于其他类型的 SharePoint 框架扩展。 现有的 SharePoint 功能框架用于使用 <CustomAction> 元素将命令集按钮预配到 SharePoint 环境。

在 SharePoint 项目的根目录中用命令行执行以下命令：

yo @microsoft/sharepoint

使用以下命令完成显示的提示（如果显示多个选项，请接受默认答案）：

• 要创建哪种类型的客户端组件？：扩展
• 要创建哪种类型的客户端扩展？：ListView 命令集
• 命令集名称是什么？：第三个部署演示

查找并打开 ./sharepoint/assets/elements.xml 文件。 将 <CustomAction> 元素上的 RegistrationId 属性更新为 101，以便将此自定义操作与文档库相关联：

<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
    <CustomAction
        Title="ThirdDeploymentDemo"
        RegistrationId="101"
        RegistrationType="List"
        Location="ClientSideExtension.ListViewCommandSet.CommandBar"
        ClientSideComponentId="bdfacb49-5f04-4cc9-a9a1-84e3de5cfc6e"
        ClientSideComponentProperties="{&quot;sampleTextOne&quot;:&quot;One item is selected in the list.&quot;, &quot;sampleTextTwo&quot;:&quot;This command is always visible.&quot;}">
    </CustomAction>
</Elements>

按照本练习前面所述的说明更新部署包并将包重新部署到网站集应用程序目录。

部署包后，请注意包版本仍为 1.0.0.0。

检查文档库命令栏

导航到在其中部署了包的网站集中的文档库。

请注意，命令栏中没有任何自定义命令集按钮。

若要激活新扩展，需要更新包版本号和预配自定义操作的功能的版本号。 然后，需要部署更新的包并更新其中包含的应用。

更新包和功能版本

找到并打开 ./config/package-solution.json 文件。

在 solution 对象中，将 version 属性更新为 1.2.0.0。

{
  "$schema": "https://developer.microsoft.com/json-schemas/spfx-build/package-solution.schema.json",
  "solution": {
    "name": "deployment-demo-client-side-solution",
    "id": "8f971fc1-644b-4117-b63a-cb17a5ea6551",
    "version": "1.2.0.0",
    "includeClientSideAssets": true,
    "skipFeatureDeployment": false,
    "isDomainIsolated": false,

    ...

  },
  "paths": {
    "zippedPackage": "solution/deployment-demo.sppkg"
  }
}

在数组中 features ，将 version 第一个功能对象的 属性更新为 1.2.0.0。

"features": [
  {
    "title": "deployment-demo Feature",
    "description": "The feature that activates elements of the deployment-demo solution.",
    "id": "a2a0db38-4821-4cda-87da-1d3ce4124660",
    "version": "1.2.0.0",
    "assets": {
      "elementManifests": [
        "elements.xml",
        "ClientSideInstance.xml"
      ]
    }
  }
]

按照本练习前面所述的说明更新部署包并将包重新部署到网站集应用程序目录。

部署包后，请注意，包版本现在为 1.2.0.0。

升级已安装的应用

在左侧导航中选择网站内容。

如果当前未处于经典模式，请选择屏幕左下角的“ 返回到经典 SharePoint ”链接。

将鼠标悬停在已安装应用的磁贴上。 请注意，版本仍为 1.0.0.0。

选择 关于 链接。

在"应用详细信息"页上，可以看到一条消息，指出有应用的新版本可用，其版本为 1.2.0.0。

选择 "获取 "按钮以升级应用程序。

SharePoint 会将你带回到 网站内容 页。 等待应用完成升级过程并验证新版本是否已安装：

检查文档库命令栏

导航到在其中部署了包的网站集中的文档库。

请注意，自定义命令集按钮现在显示在命令栏中。

使用组件版本

在本练习的这一部分中，你将了解如何对项目的不同组件进行版本控制。

检查现有组件的版本号

找到并打开文件 ./src/webparts/deploymentDemo/DeploymentDemoWebPart.manifest.json。

请注意，该组件的 version 属性设置为 *。 这意味着将从项目的 package.json 文件中提取版本号。

如果打开第二个 Web 部件和/或扩展的清单文件，你将看到相同的内容。 也就是说，组件的 version 属性设置为 *

提示

可以通过将 替换为 * 自定义值来使此值唯一，因此每个组件都可以独立进行版本控制。

在项目的根目录中找到并打开package.json文件。

请注意，该项目的 version 属性设置为 0.0.1。 这是所有组件默认使用的版本。

更新组件的版本号

将 package.json 文件中的 version 属性更改为0.0.5并保存更改。

按照本练习前面所述的说明更新部署包并将包重新部署到网站集应用程序目录。

导航到之前添加 Web 部件的页面。

请注意，这两个 Web 部件现在都显示其组件版本为 0.0.5。

摘要

在本练习中，你了解了如何更改SharePoint 框架组件和包中的版本号，以及这如何影响部署。