SharePoint Framework (SPFx)安装配置以及开发-基础篇

前言

SharePoint Framework(SPFx)，是页面和Webpart的模型，完全支持本地开发（即完全可以脱离SharPoint环境在本地进行开发）,SPFx包含了一系列的client-side JavaScript类库用于开发你的solution，下面介绍一下用于开发client-side web parts的工具和类库.

1.1为什么选择SPFx

在SharePoint Online出来之前，对于SharePoint WebPart的开发，基本上都是编写C# code，然后编译成dll，部署到客户的Farm中，但是在SPO出来之后这种方式显然已经不可以了，为了解决这个问题，微软主要引入了如下两种方式：

JavaScript注入方式

在SPO中最常用的Webpart就是Content Editor和Script Editor,你可以使用JSOM或者REST API读取数据，然后显示在页面上，使用起来比较方便。但是这种方式还是有很多的缺点，例如：

部署起来比较麻烦。
不能给客户提供合理的配置界面，多数配置信息都是在code中写的。
End user很容易不小心把code修改坏了，导致webpart不工作。
最重要的是Script Editor并不是"Safe For Scripting"多数Self-service 站点都会开启一个NoScript的feature，这样Script Editor中的脚本会被Block。

SharePoint add-in方式

目前比较流行的方式就是使用SharePoint Host的App Part的方式，这种方式实际上是把webpart做为一个Iframe引入到页面中，AppPart对应的页面实际上运行在一个独立的site里面，这种webpart可以添加到NoScript的站点中。但是这种方式也有一些缺点主要如下:

这些code运行在Iframe中，这种方式会比Script Editor的方式慢，因为这种方式需要请求另一个页面，另一个页面也需要进行身份验证等操作。
这种方式很难实现响应式布局，因为这个webpart实际上是在不同的页面中的，并且对于Iframe，Media query获得的屏幕大小实际上是Iframe的宽度，并不是真正意义上的屏幕宽度

结论：为了解决上面的两个问题，所以微软推出了SharePoint Framework作为下一代的开发方式,开发流程图：

需要安装配置的软件和环境如下图：

如果使用Visual Studio,还需要如下

1.2开发类库介绍

TypeScript

TypeScript是比JavaScript更高级的语言，TypeScript中可以定义数据类型，接口，类，等等并且TypeScript最终可以编译成JavaScript，SharePoint的client-side development tools就是使用Type Script的类，模型和接口来构建的。
关于TypeSctipt更多的详细信息请见如下链接：

JavaScript Frameworks

你可以使用比较熟悉的JavaScript框架来开发client-side web parts，以下是比较流行的JS框架:

因为编写client-side web part多数都是和SharePoint进行交互，所以这里建议大家使用SharePoint PnP JavaScript Core library 框架，在这个框架中已经为我们封装好了很多简单易用的API。

Node Package Manager (npm)

SharePoint client-side 开发工具使用npm来管理依赖以及必要的Js库，安装Node.js会自动安装npm。

Node.js

Node.js是一个开源，用于运行JavaScript 代码的跨平台运行环境。Node.js类似于IIS Express和IIS。关于Node.js更多信息请见下面链接:

Gulp task runner

SharePoint client-side 开发工具使用gulp打包工具做如下操作：

Bundle and minify JavaScript and CSS files.
Run tools to call the bundling and minification tasks before each build.
Compile LESS or SASS files to CSS.
Compile TypeScript files to JavaScript.
更多关于Gulp的信息请见如下链接
Getting started with Gulp
TypeScript and Gulp
Articles about Gulp

Yeoman generators

Yeoman用于创建新的client-side web parts的工程，一旦工程创建完毕之后，你可以选择自己喜欢的IDE进行开发，常用的IED是Visual studio Code,Sublime Text或者Atom。更多信息见如下链接:

SharePoint REST API

SharePoint REST API主要用于和SharePoint环境交互，例如：添加删除修改list中的数据等等。

安装配置

2.1安装开发工具

安装Node.js

安装NodeJS Long Term Support (LTS) v4.x.x （node-v4.5.0-x64.msi）version，安装如下：

点【Next】下一步，选择选中复选框，如下图：

选择安装目录，如下图：
如果已经安装了Node.js，可以用命令行：node -v 检查下node.js的版本是否符合要求？以管理员身份的方式打开Node.js的命令行如下图：

运行安装 npm V3，输入命令行：npm install -g npm@3，如下图：

出现如下后，表示已经成功运行 npm V3,如下图：

2.2安装编码工具

安装Visual Studio Code

使用代码编辑，我们这里使用Visual Studio Code,如下图：

安装完成如下图：

安装windows-build-tools

windows-build-tools 将安装Visual C++ Build Tools 2015和Python 2.7，运行如下命令：npm install -g --production windows-build-tools，打开Node.js的命令行，如下图：

开始在线下载工具，并进行自动配置，如下图：

开始安装python脚本环境，如下图：

最后安装完成，如下图：

安装编码环境和工具已经完成。

2.3安装Yeoman and gulp

Yeoman帮助你开始新的项目，并保持高效和最佳，SharePoint客户端开发工具包括一个用于创建新的Web部件 Yeoman generator。这个工具包括常见的样板代码和一个通用的web站点供host给webpart做测试使用。打开Node.JS命令行输入下命令：

npm install -g yo gulp

第一次运行运行如下图：

最后安装成功如下图：

如果已经安装过，但是先检查下，还是运行该命令行，如下图：

2.4安装Yeoman SharePoint generator

The Yeoman SharePoint web part generator helps you quickly create a SharePoint client-side solution project with the right toolchain and project structure.

打开Node.js命令行，运行如下命令：

npm install -g @microsoft/generator-sharepoint，如下图：

开始安装，如下图：

最后安装完成，如下图：

注意：根据实际需求，还可以安装如下工具（不是必选的），如下图：

创建SharePoint client-side webpart

创建client-side webpart的流程图如下：

3.1创建新的webpart

创建一个新的Hello World的WebPart,如下步骤：

创建一个hello word 目录工程,运行如下命令行：md helloworld-webpart，如下图：
进入hello world的目录，运行命令行：cd helloworld-webpart，如下图：
运行 Yeoman SharePoint Generator创建hello world的webpart。运行命令行：yo @microsoft/sharepoint，如下图：

选择默认的或Y，往下走：

选择默认的，一路回车往下走：

创建完毕，如下图：

3.2预览新创建的webpart

3.2.1创建安全证书

预览webpart, The client-side默认采用https进行访问的，默认没有证书在环境中创建，因此SPFx toolchain可以帮你创建安装一个开发证书，运行如下命令行：

gulp trust-dev-cert，运行如下图：

回车继续，如下图：

选择【是】则安装证书，如下图：

证书安装完毕。

3.2.2运行预览webpart

使用命令行运行预览webPart,运行命令行：gulp serve，如下图：

选择【IE浏览器】，如下图：

最后出现IE浏览的workbench,如下图：

选择点【+】J进行webpart的添加，如下图：

添加webpart后如下图：

3.2.3看看移动端的运行效果

注意：IE11下的2个移动端切换，是空白的，也许是个BUG或预览版本的问题，如下图：

手机设备下的效果图：

我改成搜狗浏览器，选择点【Mobile】图标进行手机移动端效果(默认iphone5)查看。如下图：

进行手机设备的切换，点击如下图所示：iphone 6 plus

在切换到Lumia 520下的效果，如下图：

平板电脑下的效果图：

在搜狗浏览器点【Tablet】,默认IPad下的效果图：

如图上面手机设备一样，可以切换设备。这样一个完整的webpart就自动创建好了。

使用Visual Studio Code查看源码

这里使用Visual studio Code查看源码，因为这个轻量级的工具，可以跨平台运行，可以在Mac和Linux下打开，当然有可以选择Visual Studio的专业版本。

在Node.js命令行运行命令：code .（未完待续）

使用Visual Studio 2015如何创建一个webPart

（未完待续）

如何修改代码增加webPart属性

（未完待续）

如何部署到正式的SharePoint环境中

（未完待续）

如何创建一个SharePoint列表

（未完待续）