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

本节介绍如何把客户端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

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

打包的内容

打包功能会使用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文件到应用程序目录。

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

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

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

访问你之前创建的开发者网站集。点击右上角的齿轮图标选择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/"

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

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

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

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

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

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

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