安裝 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 載入 Blockly。

如果您將下列程式碼加到任何 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 團隊建議透過套件管理員要求 Blockly (例如 NPM 或 Yarn)，原因如下：

  • 能輕鬆掌握 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);