下载 Blockly 应用

您可以通过多种方式获取 Blockly 代码，也可以通过多种方式加载 Blockly 代码 找到它

创建软件包脚本

Blockly 提供了一个脚本，用于引导起始应用，您可以 然后再进行修改它使用常用的 Web 开发工具，例如 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 中的变化
  • 建议使用插件，而不是对 Blockly 进行 monkeypatch

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