获取代码

您可以通过多种方式获取 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 进行实验：

这不是一个获取 Blockly 的长期解决方案，因为它不适用于 webpack 等捆绑器，但非常适合进行原型设计和实验。

获取代码

您可以通过多种方式让代码运行 Blockly。

Blockly 团队建议通过软件包管理器（例如 NPM 或 Yarn）强制要求使用 Blockly，因为：

更轻松地及时了解 Blockly 中的最新动态

我们建议使用插件，而不是对 Blockly 进行猴子补丁

NPM

npm install blockly --save

纱线

yarn add blockly

GitHub

您还可以从我们的 GitHub 版本下载压缩代码。不过，这需要您定期手动下载代码，才能接收 Blockly 的最新更新和修复程序。

警告 ：GitHub 下载内容仅供之前分叉 Blockly 的开发者使用。如果您是新手开发者，则应使用软件包管理器。

加载代码

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

脚本标记

使用脚本标记时，您可以访问全局命名空间中的导入内容：

// Access Blockly.

Blockly.thing;

// Access the default blocks.

Blockly.libraryBlocks['block_type'];

// Access the generator.

javascript.javascriptGenerator;

注意： 使用脚本标记时，您不能有多个消息文件，因为消息会直接应用于 Blockly.Msg 数组。

导入

注意： 由于 Blockly 打包为 UMD，而不是 ESM，因此您需要使用捆绑器（例如 webpack）才能使用我们的软件包目标的导入。// 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);