Create a SharePoint Framework(SPFx) Web Parts

建立一個 SharePoint framework (SPFx) 時，可以使用 @pnp/sp 套件，這個 library 提供許多 API 可以使用，例如 REST 查詢、批次處裡、緩存...等

這篇會帶你快速建立一個 SPFx 的專案，還不會實作程式碼，假設你的開發環境已經設置完成，那就開始吧！

還沒完成的朋友們可以參考上一篇快速設置環境

Create a new project

使用 console 指令建立一個資料夾

md spfx-helloworld-example

進入建立的資料夾

cd spfx-helloworld-example

運行 Yeoman 的 SharePoint Generator 來建立一個新的 Web Part 專案

yo @microsoft/sharepoint

成功運行後會出現如下的畫面

接著回答一系列的問題，基本上可選擇預設選項以快速建置，但有幾個例外

• Which type of client-side component to create? WebPart
  client-side 有四種可以選擇分別是 WebPart、Extension、Library、Adaptive Card Extension，我們選擇 WebPart 來完成作業

• Which is your Web part name? CRUD
  Web Part 預設名稱是 HelloWorld，我們改為 CRUD

• Which template would you like to use? No framework
  框架有兩種可以選 Minimal 和 React，如果不使用框架則還可以選 No framework，我們先不使用

接著讓它繼續運行，而 Yoeman 此時的運行會建立專案架構（folders & files），並且運行 npm install 來安裝必要的依賴項目。

最後，看到下圖 Congratulations 的訊息表示建置成功！

---

到目前為止，專案已經確實建置完成，使用 code . 指令開啟編輯器，但是在開始寫 code 之前，先把專案給運行起來，看看它長什麼樣子。

SharePoint 有提供一個託管的 workbench，讓開發者可以在 Client Side 預覽和測試所開發的 Web Part，而不是將專案直接部署到 SharePoint 上

那要如何做呢？在專案的資料夾下，直接使用 gulp serve 命令來啟動本地的 Web 服務器並加載文件，這個命令會開啟一個預設瀏覽器視窗，但你會發現它無法使用，仔細檢查這個頁面的網址，它會是 https://enter-your-sharepoint-site/_layouts/workbench.aspx，你發現它的確是無效的，因為網址內 enter-your-sharepoint 的位置是要輸入 SharePoint 的 URL 以及要測試的 site

這樣不對吧？每次 run 都要改網址，也太麻煩了！

其實，在預設情況下，它會使用指定的 URL 來啟動瀏覽器，既然可指定就代表我們可以修改指定的位置！移到編輯器找到 ./config/serve.json 並開啟，將 initialPage 屬性內的 enter-your-sharepoint-site 改為自己的 site URL，例如 https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx （這是文件提供的網址，它無法運行是正常的）

{
  "$schema": "https://developer.microsoft.com/json-schemas/core-build/serve.schema.json",
  "port": 4321,
  "https": true,
  "initialPage": "https://contoso.sharepoint.com/sites/devsite/_layouts/workbench.aspx"
}

再 run 一次 gulp serve，看到 SharePoint Workbench 成功運行畫面（圖片來源:微軟）

將建立的 Web Part 添加到頁面上（圖片來源:微軟）

預設的 Web Part（圖片來源:微軟）

未來開發時就可以透過 Workbench 來預覽，或者測試功能是否正常運行，收工！

Reference

Build your first SharePoint client-side web part (Hello World part 1)

---

Thanks for reading the article 🌷 🌻 🌼

If you like it, please don't hesitate to click heart button ❤️
or follow my GitHub ⭐ I'd appreciate it.

---