Blockly 的构建脚本

Blockly 由 100 多个 TypeScript 文件组成。它们必须先由 TypeScript 编译器 tsc 编译为 JavaScript,然后才能使用。这会创建同样数量的 .js 文件,这些文件适合本地测试,但通过互联网加载如此大量的文件会给最终用户带来缓慢的体验。为了加快 Blockly 的加载速度,系统会使用 Closure Compiler 对这些文件进行压缩(缩减),并将其合并为 6 个文件(“bundle”或“chunk”),总大小小于未压缩文件的一半。

在此过程中,使用最新 ECMAScript 功能(可能与所有浏览器都不兼容)的代码会向下转译为 ES6,后者通常与大多数广泛使用的浏览器兼容。因此,请务必仅向最终用户提供经过缩减的代码。

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

系统使用 npm 脚本运行 Gulp 任务,以自动执行构建、测试和发布 Blockly 的过程。本页介绍了主要脚本及其用途。

压缩模式和未压缩模式

直接从 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 Playground。

    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 软件包的内容。

块式 Git 代码库中不会跟踪这两个目录。

clean

npm run clean 通过删除 build/dist/ 目录来清除所有先前的 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 也是如此。

生成的 chuk 使用封装容器来确保与通用模块定义兼容,因此在将其添加到软件包之前无需进行额外处理。

build

npm run build 会运行 minifylangfiles 任务。这应该已完成在压缩或未压缩模式下加载 Blockly Playground 所需的所有操作。

package

npm run package 运行 cleanbuild 任务,然后执行以下操作:

  • build/msg/ 中的文件应用 UMD 封装容器,并将封装后的版本放入 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 代码库的拉取请求提交的代码都应运行此测试并通过测试。