SharePoint Framework 構建你的第一個web部件（一）

SharePoint客戶端web部件是出現在SharePoint頁面的控制元件，但卻是在瀏覽器本地執行的。他們是SharePoint網站的頁面上的一個個小塊。你可以使用現代的指令碼開發工具和SharePoint工作臺（一個開發測試平臺）來構建客戶端web部件，可以部署客戶端web部件到O365開發者租戶中的的傳統的web部件頁。並且對於純JavaScript指令碼的專案來說，你可以利用通用的指令碼框架構建web部件，如AngularJS和React。舉個例子，你可以使用React和Office UI Fabric React的元件一起來快速建立跟Office 365中使用者體驗相同的元件。

下面開始介紹實戰。

客戶端web部件是執行在SharePoint頁面上下文中的客戶端元件。客戶端web部件可以部署到SharePoint Online，你也可以使用現代JavaScript指令碼工具和庫來構建他們。

客戶端web部件支援：

>用HTML和JavaScript構建

>SharePoint online和本地SharePoint環境

注意：在開始跟隨本篇下面的操作步驟之前，請確保你已經參照上一篇文章進行了開發環境的配置。

建立一個新的web部件專案

在你喜歡的路徑上建立一個新的專案路徑，按下面步驟操作：

>Win+R開啟執行窗體，輸入cmd回車，在開啟的命令列中，先定位到希望專案所在的目錄，然後執行md命令，如：

md myfirstwebpart，執行之後的效果如下圖，這裡我在C盤根目錄建立了一個專案資料夾。

然後進入到剛才建立的目錄，輸入命令cd myfirstwebpart。

接下來通過Yeoman SharePoint Generator來生成一個新的web部件，執行如下的命令：

yo @microsoft/sharepoint

執行命令後會出現提示，詢問解決方案的名稱和路徑，第一個提問可以直接回車保持跟資料夾的名稱相同，第二個通過上下箭頭進行選擇後回車即可，這裡我選擇使用當前目錄，如下圖：

接下來會繼續詢問一些設定：

>web部件的名稱。（直接輸入回車保持預設）

>web部件的描述。（直接輸入回車保持預設）

>要使用的框架，可以用上下箭頭進行選擇，直接輸入回車的話即為預設項，不使用指令碼web框架。

完成後Yeoman會開始安裝必要的依賴項並生成web部件的解決方案檔案，這會需要幾分鐘，如下圖正在等待安裝完成：

操作完成之後，你會看到如下圖的資訊表示成功：

關於故障排除的資訊，檢視Known issues。

使用你最喜歡的程式碼編輯器/IDE

由於SharePoint客戶端解決方案是基於HTML/TypeScript的，你可以使用任意的程式碼編輯器或IDE來構建你的web部件，這個在上一篇文章中已經提到，不再贅述。本文將使用Visual Studio code來演示，你也可以使用其他喜歡的IDE。

使用Visual Studio 2015

目前，Visual Studio通過NodeJS工具來支援SharePoint客戶端專案，更多資訊戳這裡，在之後的文章中也會對它進行詳細介紹。

預覽web部件

如果想預覽你的web部件，編譯並在本地的web伺服器執行的話，做如下操作。

回到你的命令列，確保你仍然在專案目錄下然後輸入命令gulp serve來編譯和預覽你的web部件。

這個很重要，你可以將它理解為在Visual Studio裡面執行F5啟動除錯。

該命令會執行一系列的gulp任務來在“localhost:4321”建立一個本地的基於節點的HTTPS伺服器，並在你的本地開發環境中啟動你的預設瀏覽器去預覽你的web部件，執行命令的效果如下所示：

客戶端工具組使用預設的HTTPS端點。但是由於沒有在本地的開發環境配置預設的證照，你的瀏覽器會顯示證照錯誤，如下圖：

這取決於你使用的瀏覽器來進行下一步的操作，比如對於上圖的IE和Microsoft Edge或Google Chrome來說，選擇Continue to this website即可，如果是Firefox之類的，需要新增一個例外。

SharePoint客戶端開發工具使用gulp作為任務執行器來處理編譯程式如：

>打包並壓縮JavaScript和CSS檔案。

>在每個編譯之前執行工具來呼叫打包和壓縮任務。

>將SASS檔案編譯為CSS。

>將TypeScript檔案編譯為JavaScript。

如果對於gulp來說你是新手，你可以閱讀Using Gulp，他描述了結合VIsual Studio的ASP.NET 5專案如何使用gulp。

Visual Studio Code內建了對gulp和其他任務執行器的支援。使用Ctrl+Shift+B來除錯和預覽你的web部件。

SharePoint工作臺

SharePoint工作臺（workbench）是一個開發者設計平臺，它使你可以快速地預覽和測試web部件而不需要在SharePoint中部署他們。SharePoint工作臺包括客戶端頁面和畫板，你可以在開發時新增或刪除畫板，測試你的web部件。

點選+號按鈕來新增我們建立的web部件。點選+號時你可以看到可用的web部件列表，該列表會將我們的web部件和你的開發環境可用的web部件一同列出。

如上圖所示，選擇HelloWorldweb部件，將他新增到頁面，如下圖：

簡單嗎？這就是我們們的第一個客戶端web部件，已經新增到了頁面上。（實際上除了配置和執行幾個命令，我們們什麼都沒有寫）

選擇web部件左側的鉛筆圖示開啟web部件屬性皮膚，如下圖：

跟傳統web部件一樣，這個屬性是你可以自定義的，以後會講到。這個屬性皮膚是客戶端驅動的，提供了與SharePoint的一致性設計。我們來修改一下Description屬性試試，比如改為This is a test, awesome!

上圖只是一個示例，在實際操作的過程中你會發現，在你在右面的皮膚修改屬性的同時，左邊的web部件的內容也會隨著改變。

這是該屬性皮膚的一個新的功能，能夠配置更新行為（有反應的和無反應的）。預設情況下更新行為是有反應的，你可以在修改屬性時看到更改。就像上面說的，這個更改是馬上生效的。

Web部件專案結構

你可以使用Visual Studio Code來檢視web部件專案的結構。

>在命令列中，定位到目錄src\webparts\helloWorld。

>輸入命令

code .

用Visual Studio Code（或是你喜歡的編輯器）來開啟web部件專案。（不要忘了code後面的空格加點）

Visual Studio Code會開啟專案，如下圖：

如果你得到了錯誤，你可能需要install the code command in PATH。

構建SharePoint客戶端web部件的主要語言是TypeScript。TypeScript是JavaScript的超型別，能夠被編譯成純JavaScript。SharePoint客戶端開發工具就是用TypeScript的類、模型和介面編譯的，幫助開發者構建強壯的客戶端web部件。

下一講將對專案具體的結構和程式碼進行講解。