在上一篇部落格（二）使用Yeoman建立SharePoint Framework（SPFx）專案中，我們建立了一個簡單的HelloWorld webpart，下面我們在本地執行這個webpart，首先開啟Powershell進入專案資料夾”firstwebpart“，在執行webpart之前，需要在本地安裝一個開發者證書，以在本地環境使用https協議執行和除錯webpart，使用如下命令來安裝證書:

        命令執行結果如下，如果在執行過程中彈出安裝證書的提示框，點選確認安裝即可。

        安裝證書之後，我們使用“gulp serve”命令在本地localhost:4321啟動https伺服器，並啟動預設瀏覽器執行 webpart，因為是在本地除錯環境中除錯，所以並不需要連線SharePoint Online。

        SPFx使用開源工具gulp執行一些任務，例如gulp serve命令所執行的任務包括啟動本地除錯伺服器，將TypeScript編譯為純Javascript，將scss轉換成css，將Javascript檔案和css檔案捆綁壓縮等等。關於gulp的詳細介紹請點選這裡，另外推薦這篇有趣的文章，詳細講解了現代的前端開發框架的來龍去脈，非常有助於理解SPFx的專案結構。目前我們只需要知道gulp幫助我們在本地執行和除錯webpart即可。

    gulp serve命令執行後會自動開啟IE，啟動本地的除錯環境（即工作臺workbench）

        點選加號按鈕，新增我們建立的webpart：

        新增之後就會顯示webpart中的預設內容如下：

        我們可以點選編輯按鈕在頁面右側開啟webpart屬性編輯器：

        試一下修改webpart屬性編輯器裡的HelloWorld為“Hello SPFx”，可以看到webpart的內容也會隨之實時修改：

        以上就是在本地執行webpart的過程，現在開啟Code，回到專案中，檢視webpart的專案程式碼結構。

        簡要介紹一下各個資料夾的作用，第一個是config資料夾，其中包含的檔案用於配置專案打包和釋出，各個檔案的作用簡述如下：

        其中：

• config.json: 用於配置轉換和捆綁後的js檔案的輸出路徑，也可用於引入外部資源。
• copy-assets.json: 用於配置CDN部署路徑。
• deploy-azure-storage.json: 用於配置Azure Storage的賬戶，方便將js檔案部署到Azure Storage中。
• package-solution.json: 用於配置打包以及打包後生成的.sppkg包的路徑。
• serve.json: 用於配置工作臺除錯環境。我們在剛才使用gulp serve除錯的時候使用了這裡的配置資訊。
• tslint.json: 用於配置TypeScript型別檢查。
• write-manifests.json: 用於配置CDN路徑。

        然後是dist資料夾,，用來儲存最終生成的客戶端js程式碼，這些js程式碼可以直接在瀏覽器中執行：

        然後是lib資料夾，這個資料夾用於除錯，可以暫時忽略。接下來的node_modules資料夾用來儲存專案所有的依賴的包，例如TypeScript等等。然後是最重要的src資料夾，包含開發這個webpart的TypeScript程式碼，樣式等：

        其中HelloWorldWebPart.manifest.json檔案定義了webpart的id、別名、部署到SharePoint Online之後所屬的組名，webpart的名字和描述以及其他一些資訊。HelloWorldWebPart.modules.scss定義了webpart的樣式，HelloWorldWebPart.ts中包含TypeScript程式碼，在執行gulp serve的時候，TypeScript會被轉換成純js，scss會被轉換成css。

        TypeScript是微軟官方推出一種語言，它是JavaScript 的型別的超集，它可以編譯成純JavaScript。編譯出來的JavaScript 可以執行在任何瀏覽器上。TypeScript更適合開發大型的前端應用程式。關於TypeScript的詳細說明可以參見TypeScript中文手冊。開啟HelloWorldWebPart.ts可以看到webpart的TypeScript原始碼，原始碼由三個部分組成，第一部分是使用import關鍵字匯入資源和樣式，例如匯入SPFx框架中的BaseClientSideWebPart類，所有的webpart都需要繼承此類並且重寫render()方法：

        程式碼的第二部分定義了一個介面“IHelloWorldWebPartProps”，這個介面中定義了一個webpart的屬性，這個屬性就是webpart屬性編輯器中暴露出來的description屬性。

        程式碼的第三部分定義了HelloWorldWebPart類，並重寫了render()方法來，定義了一些頁面元素和內容來展示webpart。

         除此之外還有一個方法“getPropertyPanelConfiguration()”用來定義webpart的屬性編輯器：

        以上就是SPFx客戶端webpart專案的主要結構和程式碼，下一篇部落格將會在此基礎上新增一些控制元件，並在SharePoint Online環境中除錯webpart。