获取代码

获取 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

如果您只是想尝试一些想法，而不想引导启动完整的应用，可以使用脚本标记从 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 进行 monkeypatching

NPM

npm install blockly --save

纱线

yarn add blockly

GitHub

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

警告： 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;

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

导入

注意： 使用我们软件包目标的导入需要您使用打包程序（如 webpack），因为 Blockly 是打包为 UMD 而不是 ESM。

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