遊樂場

在 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:」存取。