SharePoint Framework 把你的客戶端web部件部署到經典的SharePoint頁面

本節介紹如何把客戶端web部件部署到SharePoint服務端頁面。我們將繼續使用之前的工程。

將HelloWorld的web部件打包

在命令列視窗中，跳轉到web部件工程目錄。跟在工作臺不同，為了在SharePoint傳統的服務端頁面使用客戶端web部件，你需要將web部件同SharePoint註冊，首先要做的就是打包。

在命令列中輸入命令“code .”，用Visual Studio Code開啟web部件工程，開啟config資料夾中的package-solution.json檔案，該檔案定義了包的後設資料，如下所示：

{
  "solution": {
    "name": "myfirstwebpart-client-side-solution",
    "id": "a479dbd3-b750-424a-82aa-7b45dad74125",
    "version": "1.0.0.0"
  },
  "paths": {
    "zippedPackage": "solution/myfirstwebpart.spapp"
  }
}

在命令列視窗，輸入下面的命令來打包包含web部件的客戶端解決方案：

gulp package-solution

這個命令會在工程的sharepoint資料夾中建立一個spapp檔案，在我的示例中名稱為：myfirstwebpart.spapp。

打包的內容

打包功能會使用SharePoint功能（Feature）來打包你的web部件。預設情況下，gulp任務建立：

>1個關於你的web部件的功能。

>1個.webpart檔案，即用來描述你的web部件的XML檔案。

你能在sharepoint資料夾中看到原始包的內容。

這些內容會被打包到.spapp檔案中，這個過程跟打包.wsp檔案類似。這個包跟SharePoint add-ins包非常類似，使用Microsoft Open Packaging Conventions來打包你的解決方案。

JavaScript檔案、CSS和其他資產檔案不會被打包，所以你需要將他們部署到一個外部的路徑（比如CDN）。如果只是出於開發過程中測試的目的的話，你可以從本地電腦載入這些資產檔案。

將HelloWorld的包部署到應用程式目錄

接下來你需要將包部署到應用程式目錄。訪問你的網站應用程式目錄。上傳或是拖拽myfirstwebpart.spapp檔案到應用程式目錄。

上傳完畢之後會彈出部署確認對話方塊，點選Deploy即可。

注意：你一定要在之前申請的開發者訂閱中部署，現在還不支援普通的訂閱。

在你的站點中安裝客戶端解決方案

訪問你之前建立的開發者網站集。點選右上角的齒輪圖示選擇Add an app操作來新增我們之前部署的解決方案。具體過程就不詳細說了，怎麼向SharePoint站點中新增內容大家都知道。

在傳統SharePoint頁面中預覽web部件

現在你已經成功部署並安裝了客戶端解決方案到你的站點，將這個web部件新增到一個傳統的SharePoint頁面。記住一些資原始檔只在本地電腦可用。

在\dist資料夾中開啟<your-webpart-guid>.manifest.json檔案。可以看到loaderConfig中的internalModuleBaseUrls屬性，在我的示例是如下：

"loaderConfig": {
    "entryModuleId": "hello-world.bundle",
    "internalModuleBaseUrls": [
      "https://CNSY20160AAAL:4321/"

在向SharePoint服務端頁面新增web部件之前，執行本地伺服器。在命令列中輸入gulp serve --nobrowser命令，該命令不會自動執行SharePoint工作臺。

將HelloWorld的web部件新增到傳統頁面。

訪問你的網站集，建立一個頁面。點選右上角的齒輪圖示，選擇網站內容。點選網站頁面庫進入，建立一個web部件頁。

建立完成後訪問這個頁面，將自動進入頁面的編輯模式，點選新增Web部件操作，選擇Custom中的我們部署的web部件。

Web部件的資產會從本地環境載入。為了能夠正確載入，你需要設定瀏覽器為允許載入不安全的指令碼。

啟用之後就可以看到跟之前本地除錯一樣效果的web部件了，體驗是一樣的。

資產檔案在本地是個問題，假設我們做的是一款產品，從本地載入是不現實的。下一講將介紹如何把web部件相關的資產檔案放到CDN上。