游乐园

在 Blockly 的核心中进行黑客攻击或开发插件时,Playground 是一款非常有用的工具。它有一个预配置的 Blockly 实例,可用于测试、调试或原型设计。在 Google 内部,几乎所有 Blockly 的开发工作都是在 Playground 中完成的。下面是演示服务器上的简单 Playground,供您预览。

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

前提条件

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

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

使用 Internet Explorer

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

简单的 Playground

其他两个 Playground 都是基于简单 Playground 构建的。该界面会显示工具箱和工作区,并允许您调整少量设置。

如需打开 Playground,请运行以下命令:

npm run start

在 Blockly 的根目录中。确保端口 8080 上没有其他内容进行监听。此命令将启动托管 Blockly 模块的服务器,并自动打开浏览器以显示 Playground 页面。准备好关闭 Playground 后,请结束进程(在 Mac 和 Linux 环境中,按 Ctrl-C)。

该游戏大本营的特色如下:

  • 所有代码均未压缩,以便快速开发。
  • 所有默认屏蔽对象(部分已废弃的屏蔽对象除外)。
  • 所有语言生成器(JavaScript、Python、PHP、Lua 和 Dart)。
  • 序列化和反序列化 Workspace 状态(JSON 或 XML)。
  • 在 LTR 和 RTL 布局之间切换。
  • 在工具箱布局之间切换。
  • 针对渲染程序的压力测试。
  • 在控制台中记录所有事件。

高级 Playground

高级 Playground 包含其他功能,可让调试 Blockly 变得更加简单。这也是 blockly-samples 中用于所有插件的默认 Playground。

该 Playground 具有所有简单的 Playground 功能,以及:

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

如需为 blockly-samples 中的任何插件启动高级 Playground,请从插件的根目录运行 npm run start。目前,一次只能运行一个插件,并且该插件使用端口 3000。如果您在启动插件时遇到问题,请先确保没有任何其他程序正在监听该端口。

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

您还可以使用 Blockly 的开发者工具包创建自己的测试页面,其中包含高级 Playground。

多游乐场

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

测试变更

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

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

直接访问 Playground

以前,您可以通过在浏览器中直接打开 test/playground.html 文件来在本地访问简单的 Playground。您仍然可以使用简单版和多版 Play 测试环境实现此目的,但我们不再建议这样做。如果您执行此操作,Playground 会检测到您未运行本地服务器,并自动使用压缩的 Blockly 文件(如需了解详情,请参阅 Building Blockly 页面),并且每当您在核心 Blockly 中更改某项时,都必须重新构建核心并暂存更改。如果这些页面托管在远程服务器上(例如托管在我们的演示网站上的示例),您仍然可以访问这些页面。当您处于压缩模式时,背景将呈亮蓝色。

高级 Playground 不支持通过 file: 访问。