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列表

（未完待續）