SharePointFramework(SPFx)安装配置以及开发基础篇

1. 前言

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

1.1为什么选择SPFx

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

• Javascript注入方式

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

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

• SharePoint add-in方式

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

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

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

需要安装配置的软件和环境如下图&＃xff1a;

• NodeJS Long Term Support (LTS) version
• Visual Studio Code
• Python 2.7.x

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

• Visual Studio 2015 plus Latest Update 3
• NodeJS Tools for Visual Studio

1.2开发类库介绍

• TypeScript

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

• TypeScript Quick Start
• TypeScript PlayGround
• TypeScript Handbook
• TypeScript community on Stack Overflow

   

• Javascript Frameworks

你可以使用比较熟悉的Javascript框架来 开发client-side web parts&＃xff0c;以下是比较流行的JS框架:

• React
• AngularJS 1.x
• Angular 2 for Type Script 2.x
• Handlebars

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

• Node Package Manager (npm)

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

• Node.js

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

• About Node.js
• Node.js API reference documentation
• Node.js Usage and Example

   

• Gulp task runner

SharePoint client-side 开发工具使用gulp打包工具做如下操作&＃xff1a;

• 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的工程&＃xff0c;一旦工程创建完毕之后&＃xff0c;你可以选择自己喜欢的IDE进行开发&＃xff0c;常用的IED是Visual studio Code,Sublime Text或者Atom。更多信息见如下链接:

• Scaffold a web app with Yeoman
• List of available Yeoman generators

   

• SharePoint REST API

SharePoint REST API主要用于和SharePoint环境交互&＃xff0c;例如&＃xff1a;添加删除修改list中的数据等等。

1. 安装配置

2.1安装开发工具

1. 安装Node.js

• 安装NodeJS Long Term Support (LTS) v4.x.x &＃xff08;node-v4.5.0-x64.msi&＃xff09;version&＃xff0c;安装如下&＃xff1a;

  

  点【Next】下一步&＃xff0c;选择选中复选框&＃xff0c;如下图&＃xff1a;

  

  选择安装目录&＃xff0c;如下图&＃xff1a;

  

  

  

   

  

   

  

• 如果已经安装了Node.js&＃xff0c;可以用命令行&＃xff1a;node -v 检查下node.js的版本是否符合要求&＃xff1f;以管理员身份的方式打开Node.js的命令行如下图&＃xff1a;

  

  

   

  

   

  

1. 运行安装 npm V3&＃xff0c;输入命令行&＃xff1a;npm install -g npm&＃64;3&＃xff0c;如下图&＃xff1a;

   

   出现如下后&＃xff0c;表示已经成功运行 npm V3,如下图&＃xff1a;

   

2.2安装编码工具

1. 安装Visual Studio Code

使用代码编辑&＃xff0c;我们这里使用Visual Studio Code,如下图&＃xff1a;

安装完成如下图&＃xff1a;

1. 安装windows-build-tools

   windows-build-tools 将安装Visual C&＃43;&＃43; Build Tools 2015和Python 2.7&＃xff0c;运行如下命令&＃xff1a;npm install -g --production windows-build-tools&＃xff0c;打开Node.js的命令行&＃xff0c;如下图&＃xff1a;

   

   开始在线下载工具&＃xff0c;并进行自动配置&＃xff0c;如下图&＃xff1a;

   

    

   

    

   

    

   

   开始安装python脚本环境&＃xff0c;如下图&＃xff1a;

   

   

    

   

   最后安装完成&＃xff0c;如下图&＃xff1a;

   

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

2.3安装Yeoman and gulp

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

npm install -g yo gulp

第一次运行运行如下图&＃xff1a;

最后安装成功如下图&＃xff1a;

如果已经安装过&＃xff0c;但是先检查下&＃xff0c;还是运行该命令行&＃xff0c;如下图&＃xff1a;

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命令行&＃xff0c;运行如下命令&＃xff1a;

npm install -g &＃64;microsoft/generator-sharepoint&＃xff0c;如下图&＃xff1a;

开始安装&＃xff0c;如下图&＃xff1a;

最后安装完成&＃xff0c;如下图&＃xff1a;

注意&＃xff1a;根据实际需求&＃xff0c;还可以安装如下工具&＃xff08;不是必选的&＃xff09;&＃xff0c;如下图&＃xff1a;

• Fiddler
• Postman plugin for Chrome
• Cmder for Windows
• Oh My Zsh for Mac
• Git source control tools

1. 创建SharePoint client-side webpart

   创建client-side webpart的流程图如下&＃xff1a;

3.1创建新的webpart

创建一个新的Hello World的WebPart,如下步骤&＃xff1a;

1. 创建一个hello word 目录工程,运行如下命令行&＃xff1a;md helloworld-webpart&＃xff0c;如下图&＃xff1a;

   

   

2. 进入hello world的目录&＃xff0c;运行命令行&＃xff1a;cd helloworld-webpart&＃xff0c;如下图&＃xff1a;

   

   

3. 运行 Yeoman SharePoint Generator创建hello world的webpart。运行命令行&＃xff1a;yo &＃64;microsoft/sharepoint&＃xff0c;如下图&＃xff1a;

   

    

   

   选择默认的或Y&＃xff0c;往下走&＃xff1a;

   

   选择默认的&＃xff0c;一路回车往下走&＃xff1a;

   

   

   

   

   创建完毕&＃xff0c;如下图&＃xff1a;

   

3.2预览新创建的webpart

3.2.1创建安全证书

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

gulp trust-dev-cert&＃xff0c;运行如下图&＃xff1a;

回车继续&＃xff0c;如下图&＃xff1a;

选择【是】则安装证书&＃xff0c;如下图&＃xff1a;

证书安装完毕。

3.2.2运行预览webpart

使用命令行运行预览webPart,运行命令行&＃xff1a;gulp serve&＃xff0c;如下图&＃xff1a;

选择【IE浏览器】&＃xff0c;如下图&＃xff1a;

最后出现IE浏览的workbench,如下图&＃xff1a;

选择点【&＃43;】J进行webpart的添加&＃xff0c;如下图&＃xff1a;

添加webpart后如下图&＃xff1a;

3.2.3看看移动端的运行效果

注意&＃xff1a;IE11下的2个移动端切换&＃xff0c;是空白的&＃xff0c;也许是个BUG或预览版本的问题&＃xff0c;如下图&＃xff1a;

1. 手机设备下的效果图&＃xff1a;

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

进行手机设备的切换&＃xff0c;点击如下图所示&＃xff1a;iphone 6 plus

在切换到Lumia 520下的效果&＃xff0c;如下图&＃xff1a;

1. 平板电脑下的效果图&＃xff1a;

在搜狗浏览器点【Tablet】,默认IPad下的效果图&＃xff1a;

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

1. 使用Visual Studio Code查看源码

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

在Node.js命令行运行命令&＃xff1a;code .&＃xff08;未完待续&＃xff09;

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

&＃xff08;未完待续&＃xff09;

1. 如何修改代码增加webPart属性

&＃xff08;未完待续&＃xff09;

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

&＃xff08;未完待续&＃xff09;

1. 如何创建一个SharePoint列表

&＃xff08;未完待续&＃xff09;