下载 Blockly 应用

获取 Blockly 代码的方法有多种，获取 Blockly 代码后可通过多种方式加载。

创建软件包脚本

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 加载 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 的 monkeypatch

NPM

npm install blockly --save

Yarn

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