游乐园

在入侵 Blockly 的核心或开发插件时,Playground 是一款非常有用的工具。它具有一个预配置的 Blockly 实例,可用于测试、调试或原型设计。在 Google,Blockly 的开发几乎全部都是使用 Playground 完成的。以下是演示服务器上的简单园地,供您预览。

Blockly 核心游戏有 3 种类型的游乐场:简单、高级和多类。在 blockly-samples 中,通常仅使用高级游乐场。

前提条件

Blockly 现在使用 Closure 模块系统。由于未编译的 Closure 模块的加载方式,必须从 http:https: 网址提取未编译的 Closure 模块,而不能直接从 file: 网址提取这些模块。因此,如需在未编译模式下加载 Playground,您必须从本地网络服务器加载它。

我们已经创建了一个用于启动本地服务器的脚本,并加载加载 Blockly 模块所需的所有代码。您需要在机器上安装 npm,并从 Blockly 的根目录运行 npm install,才能安装所有依赖项。

使用 Internet Explorer

Blockly 现在在其代码库中使用可能与 Internet Explorer 不兼容的高级功能。在经过压缩(编译)的代码中,这些功能经过转译后可以在 IE 中使用,但可能无法加载未压缩的代码。如果您在 IE 中加载 Playground(即使通过本地 HTTP 服务器加载),Playground 会自动加载经过压缩的 Blockly 代码,以确保兼容性。如需详细了解如何在压缩模式下测试 Playground 中的更改,请参阅“直接访问 Playground”部分。

简易游乐场

简单游乐场是其他两个游乐场的基础。它会显示一个工具箱和工作区,并允许您调整有限数量的设置。

如需打开游乐场,请运行

npm run start

从 Blockly 的根文件夹开始确保端口 8080 上没有其他任何内容在监听。此命令将启动托管 Blockly 模块的服务器,并自动打开浏览器并进入 Playground 页面。当您准备好关闭 Playground 后,请结束相应进程(在 Mac 和 Linux 环境中按 ctrl-c)。

该 Playground 包含以下功能:

  • 为了快速开发,所有代码均未压缩。
  • 所有默认块(某些已弃用的块除外)。
  • 所有语言生成器(JavaScript、Python、PHP、Lua 和 Dart)。
  • 对工作区状态(JSON 或 XML)进行序列化和反序列化。
  • 在 LTR 和 RTL 布局之间切换。
  • 在工具箱布局之间切换。
  • 针对渲染程序的压力测试。
  • 在控制台中记录所有事件。

高级游乐场

高级 Playground 包含一些额外的功能,可以简化 Blockly 的调试。这也是所有插件的 blockly-samples 中使用的默认园地。

该游乐场拥有所有简单的游乐场功能,以及:

  • 还可以配置其他设置,例如网格大小、缩放/移动控件、渲染程序、主题等。
  • 使用的设置和块将被缓存,并在下次加载 Playground 时自动使用。
  • 请在同一窗口中查看每个生成器的输出。

如需为 blockly-samples 中的任何插件启动高级园地,请从插件的根目录运行 npm run start。目前,一次只能运行一个插件,并且它使用端口 3000。如果您无法启动插件,请首先确保该端口上没有其他任何在监听。

如需启动核心的高级游乐场,请从 Blockly 的根目录运行 npm run start,然后点击标题下的“Advanced”链接。

您还可以使用 Blockly 的 dev-tools 软件包创建自己的测试页面,其中包含高级园地。

多游乐场

多 Playground 包含多个 Playground,这些 Playground 采用不同的 LTR 模式和工具箱位置配置。这主要用于在发布前快速检查 Blockly 是否未破坏与 LTR 相关的所有内容。如需打开此 Playground,请按照简单 Playground 的步骤操作,然后将网址更改为 /tests/multi_playground.html

测试变更

从本地服务器运行任何 Playground 时,在大多数情况下,若要在 Blockly 中看到您的更改,只需刷新页面即可。如果您添加了新文件或向文件添加了新的依赖项,则可能需要先运行 npm run build,它会更新 test/deps.js 文件以确保正确加载依赖项,然后刷新页面。

如果您运行的是插件的高级 Playground,甚至无需刷新页面。系统会自动热加载更改!

直接访问 Playground

以前,通过直接在浏览器中转到 test/playground.html 文件,即可在本地访问简单的 Playground。使用简单的多园地时,仍可以这样做,但我们不再建议这样做。如果这样做,Playground 会检测到您没有运行本地服务器并自动使用压缩的 Blockly 文件(如需了解详情,请参阅构建 Blockly 页面),并且每当您在 Blockly 核心中更改某项内容时,您都必须重新构建该核心并暂存相关更改。如果这些网页托管在远程服务器上(例如演示网站上托管的示例),您仍然可以访问这些网页。每当处于压缩模式时,背景都是亮蓝色。

无法通过 file: 进入高级 Playground。