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