SharePoint Framework(十一)使用Visual Studio开发

SPFx是client-side驱动的，并且使用了一系列的开源工具用于进行SharePoint开发，SPFx依拉node和npm于为你提供了在本地可以调试的运行环境和打包环境。gulp和webpack工具依赖于有效的node运行环境。

Visual Studio的Node.js工具

通过Visual Studio的Node.js工具，你可以使用Visual Studio作为你开发client-side webpart和程序的首选IDE。Visual Studio的Node.js工具是免费的，开源的Visual Studio插件，它是由微软和社区设计和开发的，就像SPFx一样。

安装Visual Studio工具

Visual Studio 2015
Visual Studio Update 3 or later
Node.js Tools for Visual Studio

从Visual Studio中加载SharePoint client-side工程

通过下面几步，你可以加载你的SharePoint client-side 工程到Visual Studio中

Yo SharePoint

首先你需要创建SharePoint client-side的工程，可以通过Yeoman SharePoint generator去创建

在你喜欢的路径下创建一个新的工程文件夹

md hello-vs-webpart

进入到工程文件夹下面

cd hello-vs-webpart

使用Yeoman SharePoint Generator创建新的工程

yo @microsoft/sharepoint

导入工程到Visual Studio

1，在New Project弹出框中选择Template>Other Languages>TypeScript>Node.js然后选择From Existing Node.js Code工程模板，name可以使用SharePoint client-side 工程的名字，这里是hello-vs-webpart，选择你的client-side project工程的路径，然后选择OK



2，在工程配置的地方，选择client-side web part工程的文件夹，然后选择下一步继续



3，选择下一步继续。
4，确认你的njsproj工程文件的保存位置，Visual Studio默认会显示你工程文件的路径，然后使用这个路径来保存你Visual Studio中的工程文件(.njsproj)

浏览你的工程文件 

现在Visual Studio就已经导入你的client-side工程了，这里需要等一会才能通过Visual Studio查看工程了



注意：此时你将会看到npm package explorer(在工程中展开npm节点)。

修改gulpfile.js文件

打开工程目录下面的gulpfile.js文件，把原来的变量定义标签修从let修改成var

var gulp = require('gulp');
var build = require('@microsoft/sp-build-web');

注意：这只是一个临时的解决方案，因为Visual Studio目前不支持ES6

设置工程的启动文件

要想使用Visual Studio的F5，请在工程的属性中，修改下面的属性值如下

Script(startup file):node_modules\gulp\bin\gulp.js
Script arguments：serve

Build和调试工程

现在你的client-side的工程已经设置成可以使用Visual Studio作为IDE了，为了在本地环境中预览你的web part，client-side toolchain默认使用了HTTPS协议，因为默认的证书没有在你的本地环境中安装，你的浏览器会报出错误信息。SPFx提供了一个开发者证书用于安装测试你的web part。如果要安装证书请使用如下命令：

gulp trust-dev-cert

点击F5就可以BUILD和测试你的web part了。

调试说明

JavaScript client-side 开发依赖于浏览器开发者工具，这些工具提供了强健的环境用于调试web 应用程序。调试client-side工程的主要工具还是浏览器开发工具。包含开发工具的主流浏览器如下：

Chrom-Chrome developer tool
Inertnet Explorer-IE developer tools
Micorsoft Edge-Microsoft Edge developer tools
Firefox-Firefox developer tools

Task runner explorer-执行其它task

SFPx包含了一系列gulp task，这些task可以简化你的client-side solution的打包和上传你的资源到CDN中，你可以使用如下的命令去执行他们：

gulp trust-dev-cert
gulp package-solution
gulp deploy-azure-storage

你可以使用Visual Studio的Task Runner去浏览和执行client-side工程中的可用的task，如果要打开Task Runner 窗口，可以执行如下的操作：

使用Ctrl+Alt+BkSpace
点击View->Other Windows>Task Runner Explorer



Task Runner Explorer是查看和运行gulp命令变得非常容易，你只选择command然后鼠标右键，就可以在 弹出的上下文中执行。