Windows下scratch-blocks源码编译与部署步骤详解

本篇教程介绍了如何对 Scratch3.0 的 scratch-blocks 源码进行编译和整合，以便在项目中使用。以下是详细的步骤： 首先，从官方 GitHub 仓库获取源码： 1. 访问地址：<https://github.com/LLK/scratch-blocks> 2. 使用 Git 工具在本地创建一个新目录，如 F:/Scratch3.0，并执行 `git clone` 命令将代码库克隆到该文件夹下。 接下来，为 Windows 环境配置开发环境： 3. 安装 Node.js，这是构建工具的基础。确保安装了最新版本的 npm（Node Package Manager）。 4. 安装 cnpm（淘宝镜像版 npm），加速依赖包的下载速度，命令为 `cnpm install -g cnpm`。 5. 在项目根目录（F:/Scratch3.0/scratch-blocks/）下，使用 Shift+右键快捷方式打开命令提示符或 PowerShell，以便执行后续命令行操作。 编译过程： 6. 需要全局安装 webpack，通过 `cnpm install webpack -g` 完成。 7. 然后安装本地依赖包，可能遇到错误时，可以按照提示将 `node_modules` 目录下的 google-closure-library 文件夹内容复制到一个新的 closure-library 文件夹中，再重新运行 `cnpm install`。 8. 使用 Python（版本2.7.13）来编译源代码，执行 `python build.py` 命令。这将生成多个压缩和未压缩的 JavaScript 文件，包括 blockly_*.js 和 blocks_compressed.js，以及 msg/js/en.js，这些都是块级编程语言库的重要组成部分。 最后，整合到项目中： 9. 将编译后的压缩文件添加到 HTML 项目的 `<script>` 标签中，如： ```html <script src="blockly_compressed_horizontal.js"></script> <script src="blocks_compressed.js"></script> <script src="msg/js/en.js"></script> ``` 10. 为了验证编译结果，打开 F:/Scratch3/scratch-blocks/tests/vertical_playground.html 文件，这个测试页面将在浏览器中展示 Scratch 编程块的效果。 本篇教程详细讲解了如何下载、配置和编译 Scratch3.0 的 scratch-blocks 源码，以便将其集成到 Web 应用中，实现 Scratch 编程块的动态加载和本地运行。开发者可以根据这些步骤进行实际操作，为自己的项目引入 Scratch 的功能。