Skip to content

Latest commit

 

History

History
70 lines (41 loc) · 5 KB

File metadata and controls

70 lines (41 loc) · 5 KB

训练场

在魔改 Blockly 的核心或开发插件时,训练场是一个非常有用的工具。它有一个预先配置的 Blockly 实例,可用于测试、调试或原型设计。在 Google,Blockly 的几乎所有开发都是使用 Playground 进行的。作为预览,这里是 演示服务器上的简单训练场

核心 Blockly 有 3 种类型的训练场:简单、高级和多实例。在块状样本中,通常只使用高级训练场。

先决条件

Blockly 现在使用 Closure 模块系统。由于它们的加载方式,未编译的 Closure 模块必须从一个http:https:URL 中获取,并且不能直接从file:URL 中获取。因此,要以非编译模式加载训练场,您必须从本地 Web 服务器加载它。

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

使用 Internet Explorer

Blockly 现在在其代码库中使用可能与 Internet Explorer 不兼容的高级功能。在压缩(编译)代码中,这些功能被转译为可与 IE 一起使用,但加载未压缩代码可能无法正常工作。如果您在 IE 中加载训练场,即使是通过本地 http 服务器,训练场也会因此自动加载压缩的 Blockly 代码以确保兼容性。有关在压缩模式下测试训练场更改的更多详细信息,请参阅“直接访问训练场”部分。

简单的训练场

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

要打开训练场,请在 Blockly 的根目录下运行

npm run start

确保端口 8080 上没有其他任何东西在监听。这个命令将启动一个托管 Blockly 模块的服务器,并自动打开你的浏览器到训练场页面。当您准备好关闭训练场时,结束进程(在 Mac 和 Linux 环境中按 ctrl-c)。

训练场特色:

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

进阶训练场

进阶训练场包含额外的功能,使 Blockly 的调试更加容易。这也是所有插件的 blockly-samples 中使用的默认训练场。

这个训练场具有所有简单的训练场功能以及:

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

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

要在核心中启动高级训练场,请从 Blockly 的根目录运行 npm run start,然后单击标题下的“高级”链接。

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

多训练场

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

测试更改

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

如果您正在运行插件的高级训练场,您甚至不需要刷新页面。更改会自动热加载!

直接进入训练场

test/playground.html 以前,通过在浏览器中直接导航到文件,可以在本地访问简单的训练场。使用简单和多训练场仍然可以做到这一点,但不再推荐。如果你这样做,训练场将检测到你没有运行本地服务器并自动使用压缩的 Blockly 文件(有关更多信息,请参阅 构建 Blockly),并且每当你更改 Blockly 核心中的某些内容时,你将不得不重新构建核心和阶段变化。如果托管在远程服务器上,您仍然可以访问这些页面,例如我们在演示站点上托管的示例。只要您处于压缩模式,背景就会变成亮蓝色。

高级训练场不可通过 file: 访问获得。