打包 SharePoint 框架项目并将其部署到生产环境
在本单元中,你将了解如何将SharePoint 框架解决方案打包并部署到生产环境。
SharePoint Framework 部署项目
我们首先查看 SharePoint Framework 部署项目,了解在生产中工作的 SharePoint Framework 解决方案所需的不同内容。
有两种不同类型的文件:
安装和注册:部署到 SharePoint 应用程序目录的 SharePoint 包中包括安装和注册文件。 这些文件使 SharePoint 了解包中包含的组件。
这些文件包括应用程序清单文件、功能框架文件以及 SharePoint 创建组件所需的其他文件。 不包括使应用程序运行的文件。
组件运行时文件和依赖项:在 SharePoint 环境中部署和安装后,这些是运行 SharePoint 框架 组件所需的文件。 组件使用的任何依赖项(如非Microsoft Web 框架库)都可以包含在组件的捆绑包中,也可以在运行时从外部 CDN 加载。 组件的清单文件定义组件在加载和运行它之前需要存在于页面上的所有依赖项。
这些文件包括组件、图像、CSS 文件和 JavaScript 库以及组件所依赖的 JavaScript 库或资产捆绑。
生成、捆绑和打包 SharePoint 框架解决方案
SharePoint 框架项目使用 包部署到生产中。 包文件名以 *.sppkg 扩展名结尾。 创建包有三个步骤。
内部版本
生成阶段将所有 TypeScript 转译为 JavaScript,从 TypeScript 文件生成 TypeScript 类型声明,并将语法上的 Awesome 样式表 (SCSS) 文件转译为 CSS。 所有这些文件都放置在项目的 ./lib 文件夹中。
从命令行运行 gulp 任务 生成 时,将启动生成过程:
gulp build
捆绑
下一阶段是捆绑。 捆绑阶段为 SharePoint 框架组件生成 JavaScript 捆绑包和清单。
捆绑会获取项目中引用的所有 JavaScript 和 CSS 文件,并将其合并到单个 JavaScript 捆绑包中。 通过配置文件,开发人员可以指定是使用特定组件创建多个捆绑包,还是将所有组件分组到单个捆绑包中。
常用的开源工具 Webpack 用于创建 JavaScript 捆绑包文件。 通常,开发人员需要在捆绑时创建配置文件并将其传递到 Webpack,但 SharePoint 框架会为你执行此操作。 执行捆绑任务时,SharePoint 框架生成工具链使用项目中的配置文件动态创建 Webpack 配置。
捆绑阶段生成的文件将保存到项目中的 ./dist 文件夹中。
从命令行运行 gulp 任务 捆绑包 时,将启动捆绑过程。 将可选的 --ship 或 -p
添加到 命令时,捆绑过程会最小化生成的捆绑包和清单文件。 缩小会删除所有代码注释和空白,以便为组件创建最小的文件。 缩小的文件将保存到 ./release/assets 文件夹中。
gulp bundle
包解决方案
最后一个阶段是打包。 打包阶段将生成将 SharePoint 框架解决方案部署到 SharePoint 所需的所有文件。 这些文件组合成一个带有 sppkg 扩展名的 ZIP 存档,保存到项目中的 ./sharepoint/solution 文件夹中。 此文件称为 SharePoint 包。
在将所有文件打包到 SharePoint 包之前,包解决方案阶段会生成部署所需的多个文件。 这包括创建应用清单、功能定义、元素清单,以及收集捆绑包、组件清单和字符串本地化文件等所有运行时文件。
根据项目配置,组件运行时文件(包括捆绑包、组件清单、本地化文件)放置在 ./release/assets 文件夹中或添加到包中。 可以使用 ./config/package-solution.json 文件使用 includeClientSideAssets
属性配置此设置。 设置为 true
时,文件将添加到包中,并自动预配到安装应用的网站集根目录中的 SharePoint 库 ClientSideAssets。 否则,当 属性设置为 false
时,你负责将文件部署到用户可以访问的位置,例如 Azure 内容分发网络 (CDN) 。
从命令行运行 gulp 任务 包解决方案 时,将启动打包过程。 将可选的 --ship 或 -p 添加到 命令时,打包过程将修改用于生产的清单文件,并设置组件运行时文件可以位于的 URL。 此位置在 ./config/write-manifests.json 文件中定义。
gulp package-solution
不同的生成和打包模式:调试和生产
在上一部分中,你了解了在创建 SharePoint 包时使用的两个 gulp 任务支持可选的 --ship 开关。 此开关指示你正在捆绑和打包以进行生产。 当开关不存在时,它表示你正在捆绑和打包以进行开发或调试。
gulp 生成 任务没有任何开关,但 捆绑包 和 包解决方案 任务都支持可选的 --ship 开关。 运行 捆绑包 和 包解决方案时,请确保使用或不使用 --ship 开关。 更糟糕的是,不要对一个而不是另一个使用它。
调试模式
在调试模式下捆绑和打包解决方案时,所有生成的文件都保持未管理状态。 这意味着代码注释和空格保留在生成的捆绑包和组件清单文件中。
捆绑过程还会生成 JavaScript 源映射文件,这些文件可用于在运行时调试组件。 源映射文件将生成的 JavaScript 链接到源 TypeScript 代码,以便可以直接调试 TypeScript。
调试模式假定所有文件都从本地 Web 服务器提供。 即使部署并安装 SharePoint 包,SharePoint 也会在本地 Web 服务器上查找组件的捆绑包和清单文件。
生产模式
在生产模式下捆绑和打包解决方案时,将缩小所有生成的文件。 这意味着将在生成的捆绑包和组件清单文件中删除代码注释和空白,以创建浏览器在运行时下载的最小文件。
与调试模式不同,生产模式不会生成源映射文件。
提示
开发人员可以使用 SharePoint 框架生成工具链 API 配置 Webpack 配置,以便在生产模式下捆绑时生成源映射文件。
生产模式假定所有文件都从其生产位置提供服务。 这在 ./config/write-manifests.json 配置文件中定义。
部署 SharePoint 资产
创建 SharePoint 包后,下一步是将其部署到 SharePoint 环境。 有两种方法可以部署 SharePoint 包。 这两个选项都是 SharePoint 应用程序目录。
SharePoint Online 支持两种类型的应用程序目录:租户范围和网站集范围。
包部署的另一部分解决了组件正常运行所需的运行时文件。 这包括组件的 JavaScript 捆绑包、清单文件以及任何外部依赖项。 必须将这些文件部署到站点上的所有用户都可以访问的托管位置。
部署组件运行时文件
有关这些运行时文件的托管位置的决策分为两类。 第一个类别是手动选项。 使用此选项,可以手动将文件复制或上传到目标位置。 手动部署选项的一些示例包括 Office 365 CDN、Azure CDN或公共或内部 URL 上的任何位置。 唯一的要求是网站用户必须能够访问这些文件。
部署运行时文件的另一个选项是更自动。 2017 年末,Microsoft 向 ./config/package-solution.json 文件引入了设置 includeClientAssets
。 当此属性设置为 true 时,运行时文件将包含在 SharePoint 包中。
从网站集中的 SharePoint 包安装应用程序时,SharePoint 会将运行时文件复制到网站集根目录中隐藏的库 ClientSideAssets。 组件的清单文件具有一个特殊 URL,SharePoint 框架在运行时替换该 URL 以指向 ClientSideAssets 库。
启用 Office 365 CDN 时,此库包含在 CDN 支持的库列表中。
租户 (或网站集) 广泛部署
可以通过将解决方案包安装到租户应用程序目录,或者通过将解决方案包安装到网站集应用程序目录,使SharePoint 框架组件在整个租户中可用。 这可以通过使用 ./config/package-solution.json 文件中 solution
对象的 skipFeatureDeployment
属性进行配置。
当 的值 skipFeatureDeployment
设置为 true 时,会为将包部署到应用程序目录的管理员提供启用应用并将其添加到所有站点的选项。 这适用于将来创建的现有站点和站点。
当 的值 skipFeatureDeployment
设置为 false 时,将包部署到应用程序目录的管理员没有前面所述的 选项。 包中包含的应用必须手动添加到使用组件的每个站点。
查看 - 部署和安装步骤
让我们回顾一下 SharePoint 框架解决方案的部署和安装步骤。
生成项目
第一步是使用 gulp build 命令生成项目。 这会创建解决方案部署中使用的所有文件。
生成捆绑包和清单
接下来,使用 gulp 捆绑包 --ship 命令创建用于生产的组件捆绑包和清单文件。 此步骤采用生成步骤中的文件,并创建要部署到 SharePoint 的文件。
生成 SharePoint 包
打包过程中的最后一步是使用 gulp package-solution --ship 命令创建 SharePoint 包。 此步骤从捆绑阶段获取结果,生成必要的部署文件,包括应用清单和关联的功能文件,并将其打包到具有 sppkg 扩展名的单个 ZIP 存档中。
将包上传到应用目录
创建包后,下一步是将包上传到 SharePoint 应用程序目录之一。 此过程的一部分也是启用包,向 SharePoint 指示 SharePoint 包中的应用在环境中可以安全运行。
此步骤使组件可用于在 SharePoint 环境中进行安装和使用。
从网站集的网站内容页安装应用程序
如果管理员未为包启用租户范围部署,最后一步是将包中的应用安装到网站集中。 此操作是从站点集合中“站点内容”库的“新建 > 应用”菜单中完成的。
摘要
在本单元中,你了解了如何打包 SharePoint 框架解决方案并将其部署到生产环境。