如何快速搭建 Scratch 网页客户端：从安装到使用的完整指南 🚀

Scratch 网页客户端（scratch-www）是一款开源的独立 Web 应用，让你能够直接在浏览器中体验 Scratch 的核心功能。无论是开发扩展、定制界面还是贡献代码，本教程都能帮你快速上手这个强大的工具！

📂 项目核心目录解析

scratch-www 的目录结构清晰，主要分为以下几个关键部分：

源代码与组件

src/ 目录是项目的心脏，包含所有前端实现：

• components/：存放 React 组件，如登录表单、导航栏等界面元素
• redux/：状态管理模块，处理用户会话、项目数据等核心逻辑
• views/：页面级组件，对应网站的各个页面（下载页、教程页等）

开发与构建工具

• package.json：项目依赖配置，定义了启动、测试、构建等核心脚本
• webpack.config.js：Webpack 打包配置，优化代码分发
• dev-server/：开发服务器，支持热重载和 API 代理

静态资源

static/ 目录存放图片、样式等资源：

• images/download/：包含 Scratch 安装界面相关图片
• css/：全局样式文件
• svgs/：可缩放矢量图标，用于界面美化

图：Scratch 网页客户端的下载页面设计，展示多平台安装选项

⚡ 三步极速启动项目

1️⃣ 准备环境

确保你的系统已安装 Node.js 和 npm，然后克隆仓库：

git clone https://gitcode.com/gh_mirrors/sc/scratch-www
cd scratch-www

2️⃣ 安装依赖

执行以下命令安装所有必要的依赖包：

npm install

3️⃣ 启动开发服务器

一键启动本地开发环境，支持实时代码更新：

npm start

服务器默认运行在 http://localhost:8333，打开浏览器即可预览效果！

🔧 核心命令全解析

package.json 中定义了多个实用脚本，满足不同开发需求：

开发与调试

• npm start：启动开发服务器（热重载）
• npm run build：构建生产版本到 build/ 目录

测试与质量检查

• npm test：运行全套测试（代码风格检查 + 单元测试）
• npm run test:unit：仅执行单元测试，验证核心功能

国际化支持

• npm run translate：生成多语言文件，支持全球用户

🖼️ 关键功能展示

scratch-www 不仅是一个简单的网页应用，还包含丰富的交互组件：

多平台下载界面

static/images/download/ 目录中的图片展示了跨平台设计：

• windows-install.png：Windows 安装界面截图
• mac-install.png：macOS 版本安装向导

图：macOS 版 Scratch 安装向导界面，直观展示安装步骤

响应式设计组件

src/components/responsive/ 目录下的组件确保网站在手机、平板和桌面设备上都有最佳显示效果。

📚 扩展与贡献指南

开发扩展功能

如果你想开发自定义扩展，可以参考：

• src/components/extension-landing/：扩展 landing 页组件
• static/svgs/extensions/：扩展相关图标资源

提交代码

1. 创建分支：git checkout -b feature/your-feature
2. 提交更改：git commit -m "Add new feature"
3. 推送分支：git push origin feature/your-feature

❓ 常见问题解答

Q: 启动后无法连接 API？

A: 开发服务器默认连接 Scratch 官方 API。如需本地测试，可修改 API_HOST 环境变量指向本地服务。

Q: 如何添加新页面？

A: 1. 在 src/views/ 中创建页面组件 2. 在 src/routes.json 中添加路由配置 3. 运行 npm run translate 更新语言文件

🎯 总结

通过本指南，你已经掌握了 scratch-www 的安装、启动和基本开发流程。这个开源项目不仅是学习 React 和 Redux 的绝佳案例，更是参与 Scratch 生态建设的重要途径。立即动手尝试，开启你的 Scratch 网页开发之旅吧！

需要更多帮助？查看项目 README.md 获取官方文档！