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

本篇接上一講，我們一起來看一下如何部署和測試本地開發的web部件。

在SharePoint中預覽web部件

SharePoint工作臺在SharePoint中被承載，用來在開發環境預覽和測試本地web部件。它的主要優勢是執行在SharePoint上下文的，你可以跟SharePoint資料進行互動。

還記得之前配置的Office 365開發者租戶嗎？忘了的話點這裡。

首先把workbench.aspx這個檔案上傳到你的SharePoint開發者網站的文件庫，得到一個完整的URL，如https://your-sharepoint-site/Shared%20Documents/workbench.aspx。

注意，這裡要確保你的本地除錯是可用的，什麼意思呢？在第一部分介紹的gulp serve命令要處於執行中，即開啟狀態，否則本地的那個是不可訪問的。並且，要確保https://localhost:4321/temp/manifests.js是可訪問的，否則會一直彈出下面載入指令碼失敗的提示資訊。

預設情況下你的瀏覽器可能是禁止載入本地指令碼的，這時工作臺會提示你這種情況，示例圖如下：

為了執行本地指令碼，你需要將瀏覽器配置為可從未經身份驗證的源載入指令碼。這是由於以HTTPS方式連線網頁但是卻以HTTP方式載入指令碼。不同的瀏覽器啟用此設定的方式不同，比如在Chrome瀏覽器中，你可以直接通過點選位址列右面的圖示，選擇Load unsafe scripts。IE的話就在工具選項的安全選項卡里面找那個設定。

當你能夠載入指令碼之後，你就會看到工作臺載入了出來。將hello world這個web部件新增到畫布，如下圖：

你應該會注意到現在SharePoint工作臺有了Office 365的套件導航欄，即SharePoint Online網站頁面右上角的選單部分，本地開啟的那個工作臺檔案是沒有這個的。

選擇畫布上的加號圖示顯示工具箱，工具箱會顯示SharePoint工作臺被承載的網站上可用的web部件，當然還有我們的HelloWorld的web部件。

從工具箱新增HelloWorldWebPart。這樣一來，你的web部件就執行在SharePoint的頁面上了！如下圖，可以看到自定義的屬性已經被新增並顯示在了web部件上。

由於你現在仍然在開發和測試你的web部件，目前沒有必要打包和部署你的web部件到SharePoint上。

下一步

恭喜你現在執行起來了第一個Hello World的web部件。下一講我們們將在這個web部件的基礎上繼續擴充套件，跟SharePoint進行資料互動。