DEV Community

Cover image for Create a SharePoint Framework(SPFx) Web Parts
FakeStandard
FakeStandard

Posted on

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
Enter fullscreen mode Exit fullscreen mode

進入建立的資料夾

cd spfx-helloworld-example
Enter fullscreen mode Exit fullscreen mode

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

yo @microsoft/sharepoint
Enter fullscreen mode Exit fullscreen mode

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

spfx-001

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

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

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

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

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

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

spfx-002


到目前為止,專案已經確實建置完成,使用 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"
}
Enter fullscreen mode Exit fullscreen mode

再 run 一次 gulp serve,看到 SharePoint Workbench 成功運行畫面(圖片來源:微軟)

spfx-003

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

spfx-004

預設的 Web Part(圖片來源:微軟)

spfx-005

未來開發時就可以透過 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.

Buy-me-a-coffee


Top comments (0)