SharePoint Framework 把你的客户端web部件部署到经典的SharePoint页面

红太狼 2022-02-02 15:23 215阅读 0赞

博客地址： [http://blog.csdn.net/FoxDave][http_blog.csdn.net_FoxDave]

本节介绍如何把客户端web部件部署到SharePoint服务端页面。我们将继续使用之前的工程。

将HelloWorld的web部件打包

在命令行窗口中，跳转到web部件工程目录。跟在工作台不同，为了在SharePoint传统的服务端页面使用客户端web部件，你需要将web部件同SharePoint注册，首先要做的就是打包。

在命令行中输入命令“code .”，用Visual Studio Code打开web部件工程，打开config文件夹中的package-solution.json文件，该文件定义了包的元数据，如下所示：

\{  
"solution": \{  
"name": "myfirstwebpart-client-side-solution",  
"id": "a479dbd3-b750-424a-82aa-7b45dad74125",  
"version": "1.0.0.0"  
\},  
"paths": \{  
"zippedPackage": "solution/myfirstwebpart.spapp"  
\}  
\}

在命令行窗口，输入下面的命令来打包包含web部件的客户端解决方案：

gulp package-solution

![Center][]

这个命令会在工程的sharepoint文件夹中创建一个spapp文件，在我的示例中名称为：myfirstwebpart.spapp。

![Center 1][]

打包的内容

打包功能会使用SharePoint功能（Feature）来打包你的web部件。默认情况下，gulp任务创建：

>1个关于你的web部件的功能。

>1个.webpart文件，即用来描述你的web部件的XML文件。

你能在sharepoint文件夹中看到原始包的内容。

这些内容会被打包到.spapp文件中，这个过程跟打包.wsp文件类似。这个包跟SharePoint add-ins包非常类似，使用Microsoft Open Packaging Conventions来打包你的解决方案。

JavaScript文件、CSS和其他资产文件不会被打包，所以你需要将他们部署到一个外部的路径（比如CDN）。如果只是出于开发过程中测试的目的的话，你可以从本地电脑加载这些资产文件。

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

接下来你需要将包部署到应用程序目录。访问你的网站应用程序目录。上传或是拖拽myfirstwebpart.spapp文件到应用程序目录。

![Center 2][]

上传完毕之后会弹出部署确认对话框，点击Deploy即可。

![Center 3][]

注意：你一定要在之前申请的开发者订阅中部署，现在还不支持普通的订阅。

在你的站点中安装客户端解决方案

访问你之前创建的开发者网站集。点击右上角的齿轮图标选择Add an app操作来添加我们之前部署的解决方案。具体过程就不详细说了，怎么向SharePoint站点中添加内容大家都知道。

在传统SharePoint页面中预览web部件

现在你已经成功部署并安装了客户端解决方案到你的站点，将这个web部件添加到一个传统的SharePoint页面。记住一些资源文件只在本地电脑可用。

在\\dist文件夹中打开<your-webpart-guid>.manifest.json文件。可以看到loaderConfig中的internalModuleBaseUrls属性，在我的示例是如下：

"loaderConfig": \{  
"entryModuleId": "hello-world.bundle",  
"internalModuleBaseUrls": \[  
"[https://CNSY20160AAAL:4321/][https_CNSY20160AAAL_4321]"

在向SharePoint服务端页面添加web部件之前，运行本地服务器。在命令行中输入gulp serve --nobrowser命令，该命令不会自动运行SharePoint工作台。

将HelloWorld的web部件添加到传统页面。

访问你的网站集，创建一个页面。点击右上角的齿轮图标，选择网站内容。点击网站页面库进入，创建一个web部件页。

![Center 4][]

创建完成后访问这个页面，将自动进入页面的编辑模式，点击添加Web部件操作，选择Custom中的我们部署的web部件。

Web部件的资产会从本地环境加载。为了能够正确加载，你需要设置浏览器为允许加载不安全的脚本。

启用之后就可以看到跟之前本地调试一样效果的web部件了，体验是一样的。

资产文件在本地是个问题，假设我们做的是一款产品，从本地加载是不现实的。下一讲将介绍如何把web部件相关的资产文件放到CDN上。

[http_blog.csdn.net_FoxDave]: http://blog.csdn.net/FoxDave
[Center]: /images/20220202/d4c72a13626842bcabbcaf6927b42daf.png
[Center 1]: /images/20220202/d6569c161d3742b69763361c2b811415.png
[Center 2]: /images/20220202/bdca045d864e414eae1bfa87fc01414e.png
[Center 3]: /images/20220202/88d775d08de341efb85faf30aea9d712.png
[https_CNSY20160AAAL_4321]: https://CNSY20160AAAL:4321/
[Center 4]: /images/20220202/749f3fd3577c4bc9bde1726c8f0fa275.png