构建脚本

Blockly 由 100 多个 TypeScript 文件组成。这些文件必须先由 TypeScript 编译器 tsc 编译为 JavaScript,然后才能使用。这会生成同样多的 .js 文件,这些文件适合本地测试,但通过互联网加载如此多的文件会给最终用户带来缓慢的体验。为了让 Blockly 加载得更快,我们使用 Closure Compiler 对这些文件进行压缩(缩小)并将其合并为六个左右的文件(“软件包”或“块”),这些文件的总大小不到未压缩文件的一半。

在此过程中,使用最新 ECMAScript 功能(可能与某些浏览器不兼容)的代码会被转译为 ES6,后者通常与大多数常用浏览器兼容。因此,请务必仅向最终用户提供精简后的代码。

google/blockly 代码库仅包含源代码。之前,它还包含 build 产品,但自 2019 年以来,精简的软件包已作为 blockly NPM 软件包发布,自 2022 年以来,还作为 .tgz 文件附加到每个 GitHub 版本,因此除非您要对 Blockly 本身(尤其是 coreblocksgeneratorsmsg 目录中的文件)进行黑客攻击,否则无需构建 Blockly。

Blockly 的构建、测试和发布流程使用 npm 脚本来运行 Gulp 任务,从而实现自动化。本页介绍了主要脚本以及每个脚本的作用。

压缩模式和未压缩模式

直接从 TypeScript 编译器生成的各个 .js 文件加载 Blockly 称为“未压缩模式”。由于它避免了多个缓慢的构建步骤,因此有助于实现快速的编辑-编译-运行周期;它还有助于调试,因为正在执行的 JavaScript 代码几乎与原始 TypeScript 源代码一样可读,从而无需依赖源映射。

从缩减后的软件包加载 Blockly 称为“压缩模式”。这是在将 Blockly 用作其他软件包的依赖项时测试 Blockly 更改的最佳方式,因为它会测试 blockly npm 软件包(未发布的版本)。

N.B.: 在 Blockly 代码库中,某些地方将“未编译模式”和“已编译模式”分别用作“未压缩模式”和“压缩模式”的同义词。过去,这种用法是有意义的,因为 Closure Compiler 用于压缩(缩小)代码,但现在即使在未压缩模式下,也始终需要 TypeScript 编译器,因此这种替代术语可能会令人困惑,不建议使用。

快速入门

  • 如果您已进行本地更改,并想确保这些更改不会破坏 build 或任何测试,请运行

    npm test
    

    用于构建 Blockly 并运行其测试套件。

  • 如果您想在浏览器中测试本地更改,请运行

    npm start
    

    此命令会编译 Blockly,并打开一个指向 Blockly 游乐场的网络浏览器,该游乐场以未压缩模式运行 Blockly。

    core/blocks/generators/ 中修改过的任何文件都会自动重新编译;重新加载浏览器标签页即可查看更改。

  • 如需构建本地修改的 Blockly 版本并以压缩模式将其作为另一个 npm 软件包的依赖项进行测试,请运行

    npm run package
    

    构建 Blockly 软件包,然后

    cd dist && npm link
    

    ,以告知 npm 在何处查找已编译的文件,然后在运行之前将 cd 添加到项目的目录

    npm link blockly
    

    让您的软件包使用新编译的 Blockly 版本,而不是已发布的 blockly 软件包。

详细脚本参考

本部分列出了 Blockly package.json 文件中的主要 scripts,并说明了它们的作用。

这些脚本会在两个位置生成文件:

  • build/ 子目录中的文件是用于本地测试或由 build 流水线的后续部分提取的中间文件。
  • dist/ 子目录中的文件构成了已发布的 npm 包的内容。

这两个目录均未在 Blockly Git 代码库中进行跟踪。

clean

npm run clean 通过删除 build/dist/ 目录来清理所有之前的 build。有助于修复神秘的 build 失败问题,尤其是因重命名源文件而导致的失败。

messages

npm run messages 会使用对 msg/messages.js 所做的任何更改来更新 msg/json/ 中的消息文件,并且每次修改该文件后都应运行此命令。

langfiles

npm run langfiles 会根据 msg/json 中的消息文件在 build/msg/ 中生成已编译的语言文件。

tsc

npm run tsc 会对 core/blocks/generators/ 目录的内容运行 TypeScript 编译器,并将各个 .js 文件输出到 build/src/

minify

npm run minify 运行 closure-make-depsclosure-calculate-chunks,以确定如何将编译后的 .js 文件划分为块(缩小后的软件包),然后运行 closure-compiler 来创建块,如下所示:

  • build/src/core/ 的内容变为 dist/blockly_compressed.js
  • build/src/blocks/ 的内容变为 dist/blocs_compressed.js
  • build/src/generators/javascript/(加上 build/src/generators/javascript.js)的内容变为 dist/javascript_compressed.js
  • dartluaphppython 也是如此。

生成的 chunk 使用封装容器来确保与通用模块定义的兼容性,因此在将它们包含在软件包中之前无需进行额外处理。

build

npm run build 运行 minifylangfiles 任务。这应该可以完成在压缩模式或未压缩模式下加载 Blockly 游乐场所需的一切操作。

package

npm run package 运行 cleanbuild 任务,然后:

  • UMD 封装容器应用于 build/msg/ 中的文件,并将封装后的版本放在 dist/msg/ 中。
  • dist/ 添加了各种额外的支持文件,并在适用情况下添加了 UMD 封装容器。

publish

Blockly 团队使用 npm run publish 发布 blockly npm 软件包。它依赖于 Google 内部基础架构,因此对外部开发者没有用。

lint

npm run lint 运行 ESLint,对 Blockly 源代码执行静态分析以查找问题。

test

npm test(或 npm run test)运行 package 任务,然后运行各种自动化测试(包括运行 ESLint)。此测试应针对作为拉取请求提交给 Blockly 代码库的任何代码运行并顺利通过。