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

 

1. 前言

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做为下一代的开发方式,开发流程图：

须要安装配置的软件和环境以下图：

• 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更高级的语言，TypeScript中能够定义数据类型，接口，类，等等而且TypeScript最终能够编译成JavaScript，SharePoint的client-side development tools就是使用Type Script的类，模型和接口来构建的。
关于TypeSctipt更多的详细信息请见以下连接：

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

   

• JavaScript Frameworks

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

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

由于编写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更多信息请见下面连接:

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

   

• 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。更多信息见以下连接:

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

   

• SharePoint REST API

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

 

1. 安装配置

2.1安装开发工具

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的命令行以下图：

   

   

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

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

2.2安装编码工具

1. 安装Visual Studio Code

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

 

 

安装完成以下图：

1. 安装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，以下图：

开始安装，以下图：

 

最后安装完成，以下图：

 

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

• 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的流程图以下：

3.1建立新的webpart

建立一个新的Hello World的WebPart,以下步骤：

1. 建立一个hello word 目录工程,运行以下命令行：md helloworld-webpart，以下图：

2. 进入hello world的目录，运行命令行：cd helloworld-webpart，以下图：

3. 运行 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或预览版本的问题，以下图：

1. 手机设备下的效果图：

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

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

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

 

1. 平板电脑下的效果图：

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

如图上面手机设备同样，能够切换设备。这样一个完整的webpart就自动建立好了。

1. 使用Visual Studio Code查看源码

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

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

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

（未完待续）

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

（未完待续）

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

（未完待续）

1. 如何建立一个SharePoint列表

（未完待续）