取得程式碼

取得 Blockly 程式碼的方式有很多種，取得後載入的方式也有多種。

建立套件指令碼

Blockly 提供可啟動入門應用程式的指令碼，您之後可以修改。這個範例使用 webpack 和 eslint 等常見的網頁開發工具，但不包含 React 或 Angular 等架構。

您必須先安裝 node.js 和 npm，才能執行下列指令。

如要在新的 hello-world 目錄中建立以 JavaScript 編寫的應用程式，請按照下列步驟操作：

npx @blockly/create-package app hello-world

如要在新的 hello-world 目錄中建立以 TypeScript 編寫的應用程式，請執行下列操作：

npx @blockly/create-package app hello-world --typescript

這些會建立匯入套件目標的套件。此外，它還會使用 package.json 檔案管理依附元件，方便您隨時更新至最新版 Blockly。

此外，這個套件還提供一些實用的啟動指令碼，例如在瀏覽器中於本機測試專案的指令碼：

cd hello-world
npm run start

如需其他指令，請參閱產生的 package.json 檔案。

Unpkg

如果您只是想試試想法，不想啟動完整的應用程式，可以使用指令碼標記從 unpkg 載入 Blockly。

如果您在任何 HTML 頁面中加入下列內容，即可直接在瀏覽器中開啟 HTML，並試用 Blockly：

<!-- Load Blockly core -->
<script src="https://unpkg.com/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="https://unpkg.com/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="https://unpkg.com/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="https://unpkg.com/blockly/msg/en.js"></script>

這不是取得 Blockly 的長期解決方案，因為它不適用於 webpack 等打包工具，但很適合用於原型設計和實驗。

取得程式碼

您可以透過多種方式取得程式碼，以執行 Blockly。

Blockly 團隊建議透過套件管理工具 (例如 NPM 或 Yarn) 要求 Blockly，原因如下：

• 輕鬆掌握 Blockly 的最新消息
• 建議使用外掛程式，而非猴子修補 Blockly

NPM

npm install blockly --save

毛線

yarn add blockly

GitHub

您也可以從 GitHub 版本下載壓縮程式碼。不過，您必須定期手動下載程式碼，才能取得 Blockly 的最新更新和修正。

警告： 我們僅為先前 Fork Blockly 的開發人員提供便利的 Github 下載方式。如果您是新開發人員，建議使用套件管理工具。

載入程式碼

取得程式碼後，您可以透過幾種方式從程式碼存取該程式碼。

指令碼標記

<!-- Load Blockly core -->
<script src="./my-lib-directory/blockly/blockly_compressed.js"></script>
<!-- Load the default blocks -->
<script src="./my-lib-directory/blockly/blocks_compressed.js"></script>
<!-- Load a generator -->
<script src="./my-lib-directory/blockly/javascript_compressed.js"></script>
<!-- Load a message file -->
<script src="./my-lib-directory/blockly/msg/en.js"></script>

使用指令碼標記時，您可以從全域命名空間存取匯入項目：

// Access Blockly.
Blockly.thing;

// Access the default blocks.
Blockly.libraryBlocks['block_type'];

// Access the generator.
javascript.javascriptGenerator;

注意： 使用指令碼標記時，您無法有多個訊息檔案，因為訊息會直接套用至 Blockly.Msg 陣列。

匯入

注意： 如要匯入套件目標，您必須使用套件組合工具 (例如 webpack)，因為 Blockly 是以 UMD 形式封裝，而非 ESM。

// Import Blockly core.
import * as Blockly from 'blockly/core';
// Import the default blocks.
import * as libraryBlocks from 'blockly/blocks';
// Import a generator.
import {javascriptGenerator} from 'blockly/javascript';
// Import a message file.
import * as En from 'blockly/msg/en';

匯入訊息檔案後，您也需要套用這些檔案。

Blockly.setLocale(En);

必要條件

// Require Blockly core.
const Blockly = require('blockly/core');
// Require the default blocks.
const libraryBlocks = require('blockly/blocks');
// Require a generator.
const {javascriptGenerator} =  require('blockly/javascript');
// Require a message file.
const En = require('blockly/msg/en');

如要使用訊息檔案，也必須套用這些檔案。

Blockly.setLocale(En);