获取代码

您可以通过多种方式获取 Blockly 代码，也可以通过多种方式加载该代码。

create-package 脚本

Blockly 提供了一个脚本，用于引导起始应用，然后您可以对其进行修改。它使用 webpack 和 eslint 等常见的 Web 开发工具，但不包含 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 的最新更新和修复程序。

加载代码

获取该代码后，您可以通过多种方式从代码中访问该代码。

脚本标记

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