建立一個 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 ⭐
or buy me a coffee ⬇️ I'd appreciate it.
Top comments (0)