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 本身进行黑客攻击(尤其是对 core
、blocks
、generators
或 msg
目录中的文件进行攻击),否则无需构建 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-deps
和 closure-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
。- 对
dart
、lua
、php
和python
也是如此。
生成的 chuk 使用封装容器来确保与通用模块定义兼容,因此在将其添加到软件包之前无需进行额外处理。
build
npm run build
会运行 minify
和 langfiles
任务。这应该已完成在压缩或未压缩模式下加载 Blockly Playground 所需的所有操作。
package
npm run package
运行 clean
和 build
任务,然后执行以下操作:
- 对
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 代码库的拉取请求提交的代码都应运行此测试并通过测试。