在 Blockly 核心中駭入或開發外掛程式時,Playground 是非常實用的工具。其中包含預先設定的 Blockly 執行個體,可用於測試、偵錯或原型設計。Google 幾乎所有的 Blockly 開發作業都是透過遊樂場進行。請參考示範伺服器的簡易遊樂場。
Blockly 遊戲核心分為 3 種類型,分別是簡單、進階和多重。在區塊範例中,通常只使用進階的遊樂場。
必要條件
Blockly 現在使用 Closure 模組系統。基於載入方式,未編譯的 Closure 模組必須從 http:
或 https:
網址擷取,並且不能直接從 file:
網址擷取。因此,如要在未編譯的模式下載入遊樂場,您必須從本機網路伺服器載入遊樂場。
我們建立了指令碼,用來啟動本機伺服器,並載入載入 Blockly 模組所需的所有程式碼。您必須在電腦上安裝 npm,並從 Blockly 的根層級執行 npm install
,才能安裝所有依附元件。
使用 Internet Explorer
Blockly 現在在其程式碼集中使用可能與 Internet Explorer 不相容的進階功能。在經過壓縮的 (編譯) 程式碼中,這些功能會轉譯為支援 IE,但載入未壓縮的程式碼可能無法正常運作。如果在 IE 中載入遊樂場,即使您是透過本機 HTTP 伺服器載入遊樂場,遊樂場也會自動載入經過壓縮的 Blockly 程式碼,以確保相容性。如要進一步瞭解如何在壓縮模式下測試 Playground 中的變更,請參閱「直接存取遊樂場」一節。
簡易遊樂場
簡易遊樂場則是另外兩個遊樂場的基礎。這項工具會顯示工具箱和工作區,可讓您調整少量設定。
如要開啟遊樂場,請執行:
npm run start
從封鎖的根層級開始請確認沒有其他監聽通訊埠 8080。這個指令會啟動託管 Blockly 模組的伺服器,並自動開啟瀏覽器前往 Playground 頁面。當您準備好關閉遊樂場時,請結束程序 (在 Mac 和 Linux 環境中為 ctrl-c),
Play 管理中心功能簡介:
- 為了快速開發,所有程式碼都未經壓縮。
- 所有預設封鎖項目 (某些已淘汰的封鎖條件除外)。
- 所有語言產生器 (JavaScript、Python、PHP、Lua 和 Dart)。
- 將工作區狀態 (JSON 或 XML) 序列化及還原序列化。
- 在 LTR 和 RTL 兩種版面配置之間切換。
- 切換工具箱版面配置。
- 轉譯器壓力測試。
- 在主控台中記錄所有事件。
進階遊樂場
進階遊樂場包含其他功能,讓 Blockly 偵錯變得更容易。這也會是所有外掛程式的區塊範例使用的預設遊樂場。
這款遊樂場提供所有簡單的遊樂場功能,還有:
- 您也可以調整其他設定,例如格線大小、縮放/移動控制項、轉譯器、主題等。
- 系統會快取使用的設定和區塊,並在下次載入遊樂場時自動使用。
- 在同一個視窗中查看每個產生器的輸出內容。
如要針對區塊範例中的任何外掛程式啟動進階遊樂場,請從外掛程式的根目錄執行 npm run
start
。目前,一次只能執行一個外掛程式,且該外掛程式使用通訊埠 3000。如果無法順利啟動外掛程式,請先確定沒有其他聲音監聽到該通訊埠。
如要在核心中啟動進階遊樂場,請從 Blockly 的根層級執行 npm run start
,然後按一下標題下方的「進階」連結。
您也可以使用 Blockly 的開發人員工具套件,自行建立包含進階遊樂場的測試頁面。
多遊樂場
多遊樂場包含數個採用 LTR 模式設定和工具箱位置的遊樂場。此程式庫主要用於快速檢查 Blockly 是否在發布版本前就未損毀任何 LTR 相關內容。如要開啟這個遊樂場,請按照簡易遊樂場的步驟操作,然後將網址變更為 /tests/multi_playground.html
。
測試政策變更
從本機伺服器執行任何遊樂場時,您只需重新整理頁面,就能查看在 Blockly 中的變更。如果您已在檔案中加入新檔案或新增依附元件,可能需要先執行 npm run
build
來更新 test/deps.js
檔案,確保依附元件已正確載入,然後重新整理頁面。
如果您執行外掛程式的進階 Playground,甚至不需要重新整理頁面。系統已自動熱載變更!
直接進入遊樂場
過去,直接在瀏覽器中前往 test/playground.html
檔案,就能在本機存取簡易的遊樂場。簡單的和多遊樂場仍可做到,但我們不建議這麼做。如果這麼做,Playground 就會偵測到您目前並未執行本機伺服器,並自動使用壓縮的 Blockly 檔案 (詳情請參閱建構區塊頁面)。每當您在核心 Blockly 中進行變更時,都必須重新建構核心並暫存變更。不過,如果是由遠端伺服器 (例如我們的示範網站所代管的範例) 代管,您仍可存取這些網頁。在此情況下,背景將是亮藍色的。
進階遊樂場無法經由「file:
」存取。