Blockly's 建構指令碼

Blockly 由一百多個 TypeScript 檔案組成。這些變數必須經過編譯 是由 TypeScript 編譯器 tsc 所編寫的 JavaScript 中，才能 這麼做會建立數量相當大量的合適的 .js 檔案 以便進行本機測試，但在網際網路上載入大量檔案 使用者體驗欠佳如要加快 Blockly 的載入速度， 閉包編譯器 壓縮 (最小化) 並合併成 12 個檔案 (「套件」或 「區塊」) 的檔案，且總大小少於未壓縮檔案的一半。

在這個過程中，使用最新 ECMAScript 功能的程式碼 (可能與所有瀏覽器不相容) 會轉譯為 ES6，而 ES6 通常與大多數常用的瀏覽器相容。因此 請務必只將壓縮過的程式碼提供給使用者。

google/blockly 存放區包含 只有原始碼這個程式庫先前也包含建構產品 但自 2019 年起，縮小版套裝組合已以 blockly NPM 套件，自 2022 也會以 .tgz 檔案的形式附加至各個 GitHub 版本，因此你不需要 除非您透過 Blockly 入侵，否則建構封鎖功能 寫入 core、blocks、generators 或 msg 目錄中的檔案。

建構、測試及發布 Blockly 的程序會使用 npm 指令碼自動執行 Gulp 工作。本頁面將說明主要指令碼，以及每個指令碼的功能。

壓縮和未壓縮模式

封鎖直接從.js TypeScript 編譯器稱為「未壓縮模式」。這種做法 多個緩慢的建構步驟，這有助於快速編輯編譯/編譯執行週期； 由於執行中的 JavaScript 程式碼幾乎是 與原始 TypeScript 來源一樣容易閱讀，因此不必依賴 。

從經過精簡的套件載入 Blockly 稱為「壓縮模式」。這是在將 Blockly 用作其他套件的依附元件時，測試 Blockly 變更的最佳方式，因為它會測試 blockly npm 套件 (未發布的版本)。

附註：在 Blockly 存放區中，有些地方會使用「未編譯模式」和「已編譯模式」這兩個詞彙，分別做為「未壓縮模式」和「壓縮模式」的同義詞。這種用法在過去是合理的，因為 Closure Compiler 用於壓縮 (縮減) 程式碼，但現在無論是在未壓縮模式下，還是需要 TypeScript 編譯器，因此這種替代用語可能會造成混淆，因此不建議使用。

快速入門

  • 如果您已進行本機變更，想確保這些異動不會損毀 建構或任何測試

    npm test

    建構 Blockly 並執行其測試套件。

  • 如要在瀏覽器中測試本機變更，請執行

    npm start

    這會編譯 Blockly，並開啟指向 Blockly 的網路瀏覽器 在未壓縮模式下執行「Blockly」的遊樂場。

    core/、blocks/ 和 generators/ 中任何經過修改的檔案 可以自動重新編譯重新載入瀏覽器分頁即可查看變更。

  • 如要建構本機修改版的 Blockly，並在壓縮模式下測試它，做為另一個 npm 套件的依附元件，請執行

    npm run package

    建構 Blockly 套件，然後

    cd dist && npm link

    向 npm 告知已編譯檔案的位置，然後cd前往專案的 執行

    npm link blockly

    讓套件使用 取代已發布的 blockly 套件。

詳細指令碼參考資料

本節列出 Blockly 的 package.json 檔案中的 scripts 原則 向孩子說明工作內容

這些指令碼會在兩個位置產生檔案：

  • build/ 子目錄中的檔案是用於本機用途的中介檔案 再透過建構管道的後續部分擷取測試或擷取的資料
  • dist/ 子目錄中的檔案會形成已發布的 npm 套件內容。

系統不會在區塊 Git 存放區追蹤這兩個目錄。

clean

npm run clean 會刪除 build/ 和 dist/ 目錄，清除先前的任何版本。有助於修正反恐建構失敗問題，尤其是 變更來源檔案所造成的問題

messages

npm run messages 會根據 msg/messages.js 的任何變更，更新 msg/json/ 中的訊息檔案，且應在每次修改檔案後執行。

langfiles

npm run langfiles 會在 build/msg/ 中產生已編譯的語言檔案 擷取自 msg/json 的訊息檔案中。

tsc

npm run tsc 會對 core/ 的內容執行 TypeScript 編譯器。 blocks/ 和 generators/ 目錄，以及輸出個別 .js 檔案 至 build/src/。

minify

npm run minify跑了 closure-make-deps 和 closure-calculate-chunks 決定如何將已編譯的 .js 檔案分為多個區塊 (壓縮後) 軟體包)，之後會執行 closure-compiler 建立區塊，做為 如下：

  • build/src/core/ 的內容會變成 dist/blockly_compressed.js。
  • build/src/blocks/ 的內容會變成 dist/blocs_compressed.js。
  • 「build/src/generators/javascript/」的內容 (加號 build/src/generators/javascript.js) 會變成 dist/javascript_compressed.js。
  • dart、lua、php 和 python 也同樣適用。

產生的擁塞視窗會使用包裝函式，以確保與 Universal 模組定義，因此不需額外處理 才能納入套件

build

npm run build 會執行 minify 和 langfiles 工作。應採取的行動 以壓縮率或壓縮格式 或未壓縮模式

package

npm run package 會執行 clean 和 build 工作，然後：

  • 套用 UMD 包裝函式 build/msg/，將包裝版本放在 dist/msg/ 中。
  • 透過 UMD 包裝函式在 dist/ 中新增各種額外的支援檔案，其中

publish

npm run publish 可讓 Blockly 團隊發布 blockly npm 套件。仰賴 Google 內部基礎架構，因此不實用 外部開發人員。

lint

npm run lint 會執行 ESLint，執行靜態分析 從 Blockly 原始碼找出問題

test

npm test (或 npm run test) 會執行 package 工作，然後執行各種自動化測試 (包括執行 ESLint)。您應針對任何以拉取要求形式提交至 Blockly 存放區的程式碼執行這項測試，並確保測試通過。