SharePoint Framework 簡介

做者：陳希章 發表於 2017年12月25日

前言

經過前面幾篇文章，我相信你們對於SharePoint Online的開發有了更加全面的認識，上一篇 介紹的SharePoint Add-in的開發，這種方式最開始是在2013年提出來的，目前仍然是受主流支持，不只僅可用於SharePoint Server，也能夠用於SharePoint Online。

與此同時，在2016年，一個新的開發框架浮出水面，它的名字叫作SharePoint Framework，也能夠縮寫爲SPFx。產品組提出這套框架的主要緣由，是由於SharePoint自己是在不斷髮展，另外很重要的一點也是源自客戶和開發人員的反饋——咱們須要有全新的一套框架來從新定義SharePoint 的開發——具體而言，但願能用更加原生的Web開發技術來實現，而且與SharePoint有更加天然的融合。

SharePoint Framework這套框架 (https://aka.ms/spfx) ，也基本實現了上面的承諾。這篇文章將帶領你們管中窺豹，一探究竟。

目前在Youtube上面有一個入門系列教程，有條件的朋友能夠參考: https://www.youtube.com/watch?v=WX9FL0BjE0I&list=PLR9nK3mnD-OXvSWvS2zglCzz4iplhVrKq

SharePoint Framework的主要特性

1. 在當前用戶的上下文和瀏覽器的鏈接中運行。沒有像SharePoint Add-in那樣使用IFrame，也不是將JavaScript 直接嵌入到頁面中（安全風險較高，也可能受制於用戶瀏覽器的設置而失效）。
2. 控件直接在頁面 DOM 中呈現。
3. 控件支持響應式呈現，以適應不一樣尺寸的界面。
4. 容許開發人員更好地訪問生命週期 - 其中包括呈現 - 加載、序列化和反序列化、配置更改等等。
5. 它未指定框架。可使用喜歡的任何 JavaScript 框架：React、Handlebars、Knockout、Angular 等。
6. 工具鏈基於 npm、ypeScript、Yeoman、webpack 和 gulp 等常見開放源代碼客戶端開發工具。
7. 提供可靠的性能表現，相比較SharePoint Add-in來講有了極大的提高。
8. 最終用戶能夠在全部網站上使用租戶管理員（或其代理）批准的 SPFx 客戶端解決方案，其中包括自助式團隊、組或我的網站。
9. SPFx Web 部件可添加到經典頁面和新式頁面，同時支持SharePoint Online和SharePoint Server。

SharePoint Framework能作什麼

目前來講，SPFx適合下面兩個場景的開發

1. 客戶端Web部件，你能夠用Javascript實現全部的界面，並將其應用到任何的SharePoint頁面中去。
2. 擴展程序（Extensions），包括修改頁面邏輯的 ApplicationCustomizers，爲字段提供定製的 FieldCustomizers ，還有爲列表或者文檔庫添加自定義菜單和命令的 CommandSets

準備SharePoint Framework的開發環境

若是你是Visual Studio的重度用戶，你可能會但願直接使用Visual Studio來進行SPFx的開發。目前爲止，咱們尚未看到內置的模板，但SharePoint PnP提供了一個可供單獨下載和安裝的版本，請參考 https://marketplace.visualstudio.com/items?itemName=SharePointPnP.SPFxProjectTemplate。

另一個好消息是，你可使用Visual Studio Code 這一款更加輕量級的、跨平臺的工具來進行SPFx開發，並且由於SPFx的框架無關性，你可使用你最熟悉的Javascript框架（例如React、Handlebars、Knockout、Angular等）開發。若是你對C#很熟悉，你的經驗能夠獲得複用，由於Visual Studio Code內置了對Typescript的支持。

1. NodeJS，請必定要下載安裝6.x這個版本（https://nodejs.org/dist/latest-v6.x/）。據產品組的聲明，目前SPFx在其餘版本的NodeJS中運行可能會遇到一些小問題。請安裝好以後對照下圖確認一下版本信息：

2. 經過命令 npm install -g yo gulp 安裝yeoman和gulp這兩個模塊

3. 安裝微軟提供的一個項目模板 npm install -g @microsoft/generator-sharepoint

開發和調試一個簡單的客戶端Web Part

下面我用一個實例，帶領你們來體驗一下客戶端Web Part的開發和部署。請建立一個 spfx-sample 的文件夾，而後運行下面的命令 yo @microsoft/sharepoint，而後在嚮導中每一步按照下面的提示進行選擇

1. What is your solution name : 回車
2. Which baseline packages do you want to target for your component(s)?：回車選擇默認的「SharePoint Online only (latest)」
3. Where do you want to place the files?：回車選擇默認設置
4. Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? : 回車選擇默認的No
5. Which type of client-side component to create?：回車選擇默認的WebPart
6. What is your Web part name? 輸入名稱spfxsample，而後回車
7. What is your Web part description? 留空，回車
8. Which framework would you like to use? ：回車選擇默認的設置 No JavaScript framework

而後，你可能須要等個幾分鐘直到項目生成結束，這取決於你所使用的網絡。

默認狀況下，NodeJS的包是要從國外下載的，由於衆所周知的緣由，有時候你可能會感受很是慢。有一個變通的辦法是經過修改配置，讓它使用國內的鏡像。此類的鏡像有不少，你可使用 npm config set registry https://registry.npm.taobao.org，請注意，這樣修改後要從新打開命令行窗口才會生效。

其實到這裏爲止，一個能夠運行的WebPart項目已經準備就緒了。SharePoint Framework有一個很神奇的功能，就是支持在本地直接進行調試，不要求你安裝SharePoint Server，也不須要你真的擁有SharePoint Online的環境（若是你只是顯示內容，不須要涉及到調用SharePoint資源的話），這但是一個很是大的進步了。

但要開始本地調試以前，咱們須要確保有一個用於測試的數字證書，由於SharePoint Framework要求網站的地址必須是支持SSL的。咱們能夠經過 gulp trust-dev-cert 這個命令生成一個本地的證書，而且選擇信任它。正常狀況下，你將會看到一個彈出的窗口，請你確認證書信息，命令正常運行後，會有以下的輸出：

接下來經過 gulp serve 這個命令在本地啓動一個Workbench文件，用來調試剛纔建立的這個WebPart

點擊上圖中央的加號(+)按鈕，而且選擇「spfxsample」這個Web Part

而後你會在瀏覽器中看到一個默認的Web Part被添加進來

點擊Web Part左上角的筆形圖標，在頁面的右側會出現一個屬性面板，而後我能夠修改Description的信息，它會當即顯示在WebPart的界面上，以下圖所示

看起來怎麼樣，是否是挺神奇的？更神奇的事情還在後面呢。假設我已經有了一個SharePoint Online的網站，我想在它裏面直接去調試這個WebPart，我能夠簡單的這樣作：

1. 打開任何一個SharePoint Online站點，將其地址複製下來，例如 https://microsoftapc.sharepoint.com/teams/Samplesiteforares
2. 在上面的地址後面追加一段地址 /_layouts/15/workbench.aspx，在瀏覽器中訪問這個地址後，你將看到一個跟剛纔那個本地調試界面很相似的頁面

這是真實的一個在服務器端的頁面，由於它是能夠直接訪問到SharePoint當前上下文的。（此處略），並且你在添加WebPart的時候，會看到不少在服務器纔有的WebPart

在Other裏面有咱們剛纔開發的「spfxsample」，添加後，你能夠像以前本地操做同樣設置屬性，查看頁面的變化

部署SPFx WebPart

上面的這個調試的功能，真是廣大SharePoint 開發人員求之不得的吧，反正我是這麼想的：本地不須要任何環境，就能夠直接調試，甚至能直接在遠程站點頁面上面調試，多酷啊。

若是調試完成後，接下來就是真正部署起來，畢竟咱們總不可能要求用戶都去經過 /_layouts/15/workbench.aspx 這樣的地址來訪問吧。

首先，咱們須要經過 gulp bundle 命令將當前項目進行生成捆綁

打包以後，經過gulp package-solution生成解決方案包

而後，你能夠在項目的以下目錄 sharepoint\solution 中找到一個sppkg文件

你可能會以爲gulp是一個無所不能的神器。事實上，它真的是。

在咱們以前建立好的「應用程序目錄網站」上面，能夠將這個包上傳上去

若是你對如何建立「應用程序目錄網站」 不太清楚，能夠參考 這篇文章

請注意，這裏顯示的地址仍然是 https://localhost:4321

而後你在測試網站中，就能夠添加這個應用程序了

請等待應用程序安裝完成

在當前站點，新建一個網頁，在編輯網頁的時候，能找到此前咱們建立的WebPart

關於具體的使用，跟此前本地調試時是同樣的

一切看起來都很完美，可是要注意，上面這種部署方式，其實咱們的應用仍是在本地運行的，因此你要確保運行了gulp serve，不然會報錯。

可是，這顯然也是不現實的。咱們固然須要把這個應用部署在服務器，相似於SharPoint Add-in的那種所謂的Provider-Hosted模式。可是，在SharePoint Framework中，它支持將你的項目成果發佈到SharePoint中去，它會用CDN（內容分發網絡）幫助你託管，這樣就不存在外部網址，以及由此產生的跨域訪問等問題了。

要確保當前網站是否支持SharePoint CDN，你須要有Office 365全局管理員或者SharePoint 管理員的身份，而且按照下面的提示安裝好相關的PowerShell管理工具。

https://www.microsoft.com/en-us/download/details.aspx?id=35588

打開SharePoint Online Management Shell，運行 Connect-SPOService https://m365x810646-admin.sharepoint.com 鏈接到你的SharePoint Online管理中心。

而後，運行 Get-SPOTenantCdnEnabled -CdnType public 確認當前租戶是否支持CDN功能。若是是False，則繼續執行 Set-SPOTenantCdnEnabled -CdnType public,而後再提示問題時輸入a，執行腳本

接下來，咱們就能夠再次打包當前項目了。請注意命令有所改變，首先是 gulp bundle --ship，而後是 gulp package-solution --ship。

再次將生成的sppkg文件上傳到應用程序目錄網站，你會發現內容地址改爲了「SharePoint Online」

而後在測試網站中添加這個應用程序，如今能夠發現即使本地並無運行gulp serve，那個WebPart也能正常工做。

結語

SharePoint Framework（SPFx）是一個很好的創新，它將SharePoint開發提高到了一個全新的高度，開發人員可使用最多見的Web開發工具、框架、語言，實現WebPart和Extensions，這些自定義組件，能夠無縫地和SharePoint的原生內容整合在一塊兒。

關於SPFx中WebPart開發的更多詳細內容，限於篇幅這裏就不一一展開了，有興趣請參考 https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/overview-client-side-web-parts，關於SPFx中Extensions開發，請參考 https://docs.microsoft.com/en-us/sharepoint/dev/spfx/extensions/overview-extensions