# 构建 Blockly

Blockly 由一百多个 JavaScript 文件组成。通过 Internet 加载这些对于最终用户来说是一种缓慢的体验。为了使 Blockly 加载更快,它可以压缩到六个文件,总计约 720kb。

Blockly 还在其未压缩代码中使用了高级 JavaScript 功能,这些功能可能与所有浏览器都不兼容。构建代码会将其转换为 es5,它通常与旧版浏览器(如 Internet Explorer)兼容。因此,仅向最终用户提供压缩代码非常重要。

Blockly 附带源代码和压缩文件,除非你需要魔改 coreblocksgeneratorsmsg目录中的文件,否则无需构建 Blockly 。

注意

在本文档中,我们经常交替使用“构建”和“压缩”,因为我们的构建过程也会压缩代码。

压缩 Blockly 非常简单。只需运行以下命令:

npm run build

此命令大约需要 20 秒,并使用 Google 的 Closure Compiler 重建几个关键文件:

  • 目录的内容core/变为blockly_compressed.js.
  • 生成一个名为的替代文件blockly_uncompressed.js(见下文)。
  • 目录的内容blocks/变为blocks_compressed.js.
  • 目录的内容generators/变为 javascript_compressed.jspython_compressed.jsphp_compressed.js和 。lua_compressed.js``dart_compressed.js
  • 对文件的任何更改都会messages.js映射到msg/json文件上,然后msg/js重新生成文件。

此脚本的输出位于build目录中,该目录未签入到 git。要将此输出复制到顶级构建文件,请运行npm run checkin:built. 如果您需要顶级文件来反映您的更改(例如不建议通过文件 url 直接访问 Playground,或者如果您是 Blockly 团队成员准备新版本),您只需要这样做。如果您通过运行其中一个 训练场 来测试 Blockly,或者 您正在对 Blockly 进行例行更改,则不需要这样做。

# 构建脚本

您可能不想为您的开发过程构建所有 Blockly。您可以使用以下命令来构建文件的子集:

  • npm run build构建一切。
  • npm run build:blocks构建blocks_compressed.
  • npm run build:compressed构建blockly_compressed.
  • npm run build:core构建blockly_compressed,blockly_uncompressedblocks_compressed.
  • npm run build:generators构建每个<language>_compressed.js文件。
  • npm run build:langfiles构建每个msg/js/<LANG>.js文件。
  • npm run build:uncompressed构建blockly_uncompressed.

每个脚本的输出都在build目录中,如上所述。

# 压缩模式

作为压缩的结果,Blockly 可以加载少量的 HTTP 请求:

<script src="blockly_compressed.js"></script>
<script src="blocks_compressed.js"></script>
<script src="javascript_compressed.js"></script>
<script src="msg/js/en.js"></script>

请记住,作为开发人员,您可能拥有比您的用户更好的 Internet 连接和更现代的浏览器。压缩代码对用户来说意义重大。

# 未压缩模式

也就是说,压缩代码很难阅读。修改核心 Blockly 时,使用未压缩模式。让我们分解上面列出的四个脚本并找到它们的未压缩版本:

注意

未压缩的 Blockly 可能使用 ES6 语言特性,并且不兼容 Internet Explorer。如果要发布到 IE,请确保使用压缩文件。

# Core

<script src="blockly_compressed.js"></script>

这很容易。只需将 “compressed” 更改为 “uncompressed” 即可:

<script src="blockly_uncompressed.js"></script>

blockly_uncompressed.js 文件由构建脚本生成并加载所有必需的 core/ 文件。

# Blocks

<script src="blocks_compressed.js"></script>

如果有人魔改默认块,请将压缩块文件替换为原始源文件:

<script src="blocks/logic.js"></script>
<script src="blocks/loops.js"></script>
<script src="blocks/math.js"></script>
<script src="blocks/text.js"></script>
<script src="blocks/lists.js"></script>
<script src="blocks/colour.js"></script>
<script src="blocks/variables.js"></script>
<script src="blocks/procedures.js"></script>

# Generators

<script src="javascript_compressed.js"></script>

如果要魔改默认块,请将压缩块文件替换为原始源文件(根据需要将“javascript”更改为“python”、“php”、“lua”或“dart”):

<script src="generators/javascript.js"></script>
<script src="generators/javascript/logic.js"></script>
<script src="generators/javascript/loops.js"></script>
<script src="generators/javascript/math.js"></script>
<script src="generators/javascript/text.js"></script>
<script src="generators/javascript/lists.js"></script>
<script src="generators/javascript/colour.js"></script>
<script src="generators/javascript/variables.js"></script>
<script src="generators/javascript/procedures.js"></script>

# Language

<script src="msg/js/en.js"></script>

将语言文件(en、、、ruvi)替换为messages.js

<script src="msg/messages.js"></script>