安裝 Blockly

取得 Blockly 程式碼的方法有很多種，還有數種方式在取得 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 的最新資訊
  • 建議您使用外掛程式，而非使用 Monkeypatching Blockly

NPM

npm install blockly --save

毛線

yarn add blockly

GitHub

您也可以從我們的 GitHub 版本下載壓縮過的程式碼。但是，您必須定期手動下載程式碼，才能接收 Blockly 的最新更新與修正項目。

載入程式碼

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

指令碼標記

<!-- 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;

匯入

// 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);