使用 Blockly 和區塊式範例進行偵錯

在區塊範例中開發外掛程式時,有時您需要在 Blockly 中進行相應的變更。大多數外掛程式都設定成從 npm 登錄檔擷取 Blockly,因此您只能使用已在 npm 上發布的程式碼。這會導致 Blockly 變更的偵錯作業變得困難。當您想要在區塊和區塊式範例中進行變更及測試變更時,可以使用下列任一方法,一起使用未發布的變更。

您可以告知 npm 使用機器中的套件,而不必從 npm 登錄檔擷取套件。只要使用這個方法,應該就能存取來源對應,進而更輕鬆地對 blockly_compress 進行偵錯。您可以使用這個方法搭配尚未推送至 GitHub 的核心變更。

  1. 善用方塊:

    $ npm run package
    $ cd dist
    $ npm link
    

    這些步驟會建構核心 Blockly、將其封裝,然後建立封裝檔案的符號連結。

  2. 在區塊樣本的分支中:

    $ npm link blockly
    

    這個步驟會指示 npm 尋找先前建立的符號連結,而非從 npm 擷取套件。

  3. 使用 npm run start 測試外掛程式。

當您在核心中進行變更時,必須重新建構並重新封裝。

方法 2:從 GitHub 擷取

您可以指示 npm 從 GitHub (而非 npm 登錄) 擷取套件。使用此方法時,您應可存取來源對應,以簡化 blockly_compress 的偵錯作業。您必須使用已發布至 GitHub 的區塊版本。

  1. 確認外掛程式的 package.json 中的 scripts 區段包含下列內容:

    "postinstall": "blockly-scripts postinstall"
    

    這個指令碼在後續步驟中從 GitHub 安裝後,會自動建構 Blockly。

  2. 請改為提供 Git 位址和分支版本名稱,而不要在 package.json 中提供區塊號碼:

    "blockly": "git://github.com/google/blockly.git#develop"
    

    如果有未合併的變更,這也可以是自己的區塊分支連結。

  3. 風速:npm install

  4. 使用 npm run start 測試外掛程式

在核心 Blockly 中進行變更時,您必須將其推送至指定分支版本的 GitHub。此外,如果您希望 npm 從 GitHub 擷取新版本,您必須先 npm uninstall blockly (或從 node_modules 中移除此版本),然後依照上述方式重新安裝。

方法 3:進階遊樂場

您可以使用核心 Blockly 中的進階 Playground 進行偵錯。您將使用這個方法,您將使用 blockly_uncompressed,這可能較容易偵錯,因為您將不會依賴來源對應。如果您在使用來源對應進行偵錯時遇到問題,或想要使用進階遊樂場的功能測試外掛程式,請使用這個方法。

  1. 在 Blockly-samples 的外掛程式目錄中:

    $ npm run build
    $ cd dist
    $ pwd
    

    此程序會建構並封裝您的外掛程式。然後輸出外掛程式的 dist 目錄完整目錄路徑。請複製這個路徑,下個步驟會用到。

  2. 位於區塊的 advanced_playground.html 中:

    <script src="$PATH_TO_DIST_DIR/index.js">
    

    接著,您還需要對外掛程式進行任何設定。例如,您可能需要在選項物件中指定某些值。請在現有的工作區設定中完成這項設定。

  3. 在瀏覽器中開啟進階 Playground,以測試外掛程式。

進行區塊變更時,只需要重新整理。當您對外掛程式進行變更時,需要重新執行 npm run build