Microsoft MakeCode（PXT）：为教育场景打造的 TypeScript 编程框架

它解决什么问题

PXT 解决的是编程教育工具的开发成本问题。一个面向初学者的编程环境，通常需要积木式编辑器、文本编辑器、代码转换器、编译器后端，还有包管理。这些组件单独搭建工作量巨大，而 PXT 把它们整合成一个框架。它的目标用户是教育平台开发者，以及那些想为特定硬件（如 micro:bit、Adafruit 板卡）创建专属编程体验的团队。PXT 的底层语言是 TypeScript 的子集，刻意去掉了 JavaScript 的动态特性，这保证了代码可以被静态分析和编译成机器码。

核心机制：从积木到机器码

PXT 的架构可以从 README 中看出端倪。它包含一个基于 Blockly 的积木编辑器，以及一个基于 Monaco 的文本编辑器，两者之间可以互相转换。积木定义的块可以通过 TypeScript 扩展，这意味着开发者可以用 TypeScript 编写新块，然后自动出现在积木面板中。更关键的是，PXT 内置了一个 ARM Thumb 机器码生成器，它能把 TypeScript 子集编译成 ARM Thumb 指令，这解释了为什么 PXT 能用于 micro:bit 这类资源受限的硬件。数据流大致是：用户在积木或文本编辑器中编写代码，PXT 将其转换为内部表示，最终生成目标平台的二进制文件。这个流程在 README 中没有详细展开，但从功能列表可以推断出它的设计意图。

如何运行一个目标

要运行一个 PXT 目标，你需要先构建命令行工具。README 给出的步骤是：安装 Node（最低版本 8），然后在仓库根目录执行 `npm install` 和 `npm run build`。之后全局安装 `pxt` 和 `gulp`：`npm install -g pxt`，`npm install -g gulp`。接着，你需要一个目标仓库，比如 pxt-microbit，它应该与 pxt 仓库同级。在目标目录下运行 `pxt serve`，PXT 会启动本地服务器并在浏览器中打开编辑器。如果你在修改 PXT 本身，可以用 `gulp watch` 监听变化并自动重建。如果只改 CLI，用 `gulp watchCli`。构建时如果想跳过 webapps（如 skillmap、multiplayer），可以加 `--no-webapps` 参数。这些命令具体且直接，但注意 README 提到，如果之后运行 `npm i`，可能需要重复 `pxt link` 步骤。

扩展块和主题定制

PXT 的扩展机制允许你用 TypeScript 定义新块，这是教育领域常见的需求：为特定硬件封装传感器或执行器操作。README 没有给出具体的 API 示例，但说明了扩展块需要遵循 PXT 的约定。另一个定制点是共享样式。PXT 在 `theme/themepacks.less` 中定义了 CSS 变量，用于跨目标共享颜色等样式。如果你想添加新的颜色变量，需要在 `:root` 伪类中声明，然后添加到所有主题类（目前只有 `theme-highcontrast`），最后在目标仓库的 `theme/themepacks.less` 中覆盖。这个过程明确但繁琐，说明 PXT 的定制不是零成本，需要理解其主题层级。

文档高亮与图标生成

PXT 的文档系统使用 highlight.js 进行代码高亮，支持 TypeScript、Python、JavaScript、HTML/XML、Markdown 和 JSON。如果你想添加新语言，需要从 highlightjs.org 下载包含所有所需语言的版本，然后替换 `webapp/public/highlight.js/highlight.pack.js`。这个操作直接覆盖文件，没有版本管理机制，意味着升级 highlight.js 时可能遇到兼容问题。图标方面，PXT 使用自定义 SVG 图标，需要 1000x1000 像素，位于 `svgicons/` 目录。构建时会生成 WOFF 字体文件，你可以在 `http://localhost:3232/icons.html` 查看。如果图标显示有问题，可以用 `svgo` 优化 SVG。这些细节表明 PXT 的自定义项不少，但文档给出了明确步骤。

测试与维护成本

PXT 的测试位于 `tests/` 目录，包含 node 和浏览器测试，运行 `npm run test:all` 即可执行。README 没有说明测试覆盖率或运行时间，但考虑到框架的复杂性，测试套件不会小。维护成本方面，`master` 是活跃开发分支，当前为 v3.* 版本，而 `v*` 分支用于服务旧版本。这意味着如果你想获得新功能，需要跟随 master 更新，但可能引入破坏性变化。README 建议在修改 PXT 时使用 `pxt link` 链接本地版本，这增加了调试的灵活性，但也意味着每次 `npm i` 后需要重新链接。整体来看，PXT 的维护需要一定 Node.js 和构建工具经验。

局限与替代方案

PXT 最明显的局限是它只支持 TypeScript 子集，不支持 JavaScript 动态特性。这意味着如果你的教学场景需要展示 JavaScript 的灵活性，PXT 会碍手碍脚。另外，PXT 的架构是围绕 Blockly 和 Monaco 固定的，如果你想用其他积木库（比如 Scratch 的渲染引擎），几乎不可能。替代方案是直接使用 Blockly 库，它允许你从零构建积木编辑器，但你需要自己处理文本转换、编译器后端和包管理。Blockly 更灵活，但集成成本高。另一个替代是使用 Scratch 的源码，它更侧重于多媒体和叙事，但扩展硬件支持需要更多工作。PXT 的优势在于它已经为教育场景优化了这些组件的协作，但代价是定制自由度受限。

编辑结论

PXT 适合那些需要快速搭建面向初学者的编程编辑器的团队，尤其是配合 micro:bit、Arcade 等硬件目标。它已经把 Blockly、Monaco、编译器后端和命令行工具打包好，省去大量集成工作。但如果你需要的是完整 JavaScript 运行时支持，或者希望完全掌控编辑器的交互细节，PXT 的 TypeScript 子集和固定架构会成为约束。在决定采用之前，先确认你的目标硬件是否有现成的 target 仓库，比如 pxt-microbit，否则你需要自己编写 target 适配层。同时，检查你的 Node 版本是否满足要求，以及是否愿意接受频繁的 master 分支更新。PXT 的 MIT 许可证允许自由使用，但 Microsoft 商标（如 MakeCode 名称）受额外限制，发布产品时需注意。

官方来源

1. Official documentation
2. Official README
3. Project repository