SharePoint Framework系列(八)-部署client-site web part到SharePoint环境中_sharepoint将自定义webpart部署到正式环境需要哪些文件-CSDN博客

在本篇文章中你将学习到如何部署你的client-side web part到SharePoint环境中，并且在传统的 SharePoint server-side页面中显示。这篇文章是 SharePoint Framework系列(七)-构建第一个webpart(连接到SharePoint)的延续。

请确保你已经看过如下的两篇文章

打包HelloWorld web part

在命令行窗口，访问你之前创建的工程目录，可以通过如下命令：

cd helloworld-webpart

如果gulp serve还在运行请通过Ctrl+C停止运行，和在workbench上面不同，如果你需要在SharePoint传统的server-side页面中显示web part，你需要部署并且在你的SharePoint环境中进行注册。首先你需要把你的web part进行打包。

使用Visual studio code打开HelloWorldWebPart工程，然后打开config文件夹下面的package-solution.json，这个文件的内容如下：

{
    "solution": {
    "name": "helloworld-webpart-client-side-solution",
    "id": "ed83e452-2286-4ea0-8f98-c79d257acea5",
    "version": "1.0.0.0"
    },
    "paths": {
    "zippedPackage": "helloworld-webpart.spapp"
    }
}

在命令行中，输入如下命令去打包包含web part的client-side solution

gulp package-solution

这个命名会在sharepoint folder下面创建下面的包：

helloworld-webpart.spapp

包中内容

这个包是使用的SharePoint的Feature去打包你的web part，默认情况下gulp 任务会创建如下元素：

一个web part需要的feature。
一个.webpart文件，这个是一个XML文件，主要用来描述web part。

你可以在sharepoint 文件夹下面，查看包的内容，这些内容会打包成.spapp文件。这个包中的格式非常像SharePoint add-in( SharePoint App)。JavaScript和CSS文件以及其它的相关文件并没有打到包中，你需要部署这些文件到一个外部的位置中(例如：CDN)。为了在开发过程中测试你的web part，你可以从本地加载所有的相关文件。

部署HelloWorld 包到app catalog中

下一步你需要把包部署到App Catalog站点中，上传helloworld-webpart.spapp到App Catalog中。

这样就可以部署client-side 包，因为这个是一个full trust的client-side的solution，SharePoint会弹出一个界面询问你是否要trust这个client-side solution。

选择Deploy。

注意：如果你的包部署失败了，或者没有提示，那么很可能是因为你用的是普通的tenant，请确保你已经给你的tenant环境开启了First Release或者你使用的是Office 365 Developer tenant。经过个人测试开启First Release似乎不好用，所以建议申请Office 365 Developer tenant。

在站点中安装client-side solution

进入developer 站点，点击右上角的图标，然后选择Add an app，在Search 框中输入helloworld，然后进行搜索。

选择helloworld-webpart-client-side-solution app然后安装。

client-side solution和web part此时就已经安装到了你的developer站点中了。Site Contents页面会显示client-side solution的安装状态，在进行如下步骤之前，请确认已经安装完毕。

在传统的SharePoint页面中预览web part

到现在为止，你已经部署和安装了client-side solution，添加web part到SharePoint传统的页面中。请注意相关的资源(例如：JavaScript和CSS)在本地机器上是可用的。

打开\dist文件夹下面的<your-webpart-guid>.mainfest.json文件，注意LoaderConfig节点下面的internalModuleBaseUrls属性是执行你本地机器的：

"internalModuleBaseUrls": [
    "http://`your-local-machine-name`:4321/"
]

在添加web part到SharePoint server-side页面之前，需要运行本地的server。在命令行窗口运行如下的gulp task在本地启动server：

gulp serve --nobrowser

注意: --nobrowser 不会加载Web Part workbench。

添加HelloWorld web part到传统页面

在浏览器中访问你的site collection。

在下一步中创建一个传统的页面，并且访问你的SitePages文档库。

选择右上角的齿轮图标，然后选择Site Contents。

选择SitePages 文档库，然后进入SitePages。

选择New 按钮创建传统的SharePoint Page

使用HelloWorld作为页面的名称

选择Create按钮去创建web part页面，SharePoint就会创建对应的页面

在ribbon上面选择Insert->Web Part打开Web Part文档库

在web part文档库中选择Custom这个分类

注意：在预览阶段client-side web parts会显示在Custom这个分类下面

你可以看到你的Hello World web part

Web Part gallery opened with custom category

选择HelloWorld web part然后添加到页面中

web part的相关资源会从本地的环境中进行加载，为了能够加载本地的脚本，你需要设置浏览器允许加载不安全代码。取决于你用的是哪个浏览器，在本节中你需要确保你的浏览器允许加载不安全代码。

你将会看到前一篇文章中的web part，但是这个web part是从当前站点中加载的数据。

编辑web part属性

选择编辑web part的菜单，然后选择Edit Web part就可以打开web part的属性面板。

属性面板会打开server-side的web part属性面板，但是这里提供了一个可以设置client-side web part属性的地方。

Configure web part - Property Pane options

选择Configure按钮，可以加载client-side web part属性面板，这个面板和你之前在workbench中测试和预览的效果是一样的，编辑Description属性，你会看到web part上面会变化。

选择X图标可以关闭client-side的属性面板，然后选择server-side的属性面板中的OK按钮去保存Web part的属性，因为这个web part是运行在传统的SharePoint页面中的，选择Ok或者Apply按钮都会保存 web part的属性。

在ribbon页面中选择Save按钮，然后保存页面

注意：SharePoint Framework目前正处于Preview阶段，随时会进行一些更改。SharePoint Framework Client-side web parts在Office 365的生产环境中暂时不支持。