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

（未完待續）