从源码到桌面：为Linux系统构建Scratch3.0独立应用

1. 为什么需要自己构建Scratch3.0 Linux版

作为一个长期使用Linux系统的开发者，我经常遇到一个尴尬的情况：很多优秀的软件官方只提供Windows和macOS版本。Scratch3.0就是这样一个典型案例。MIT开发的这款图形化编程工具深受孩子们喜爱，但官方并未提供Linux桌面版本。这让我家两个小朋友为了抢电脑学编程闹得不可开交。

实际上，Scratch3.0的源码是完全开源的，这给了我们DIY的机会。通过Electron框架，我们可以将基于Web的Scratch3.0打包成真正的桌面应用。这个过程不仅解决了实际问题，还能让我们深入理解现代跨平台应用的构建原理。我实测下来，最终生成的.deb安装包在Ubuntu 18.04到22.04各个版本上运行都很稳定。

2. 准备工作与环境配置

2.1 系统要求与依赖检查

在开始之前，我们需要确保系统满足基本要求。我推荐使用Ubuntu 18.04或更高版本，其他基于Debian的发行版也可以。首先检查三个核心工具是否安装：

git --version node -v npm -v

如果尚未安装，可以通过以下命令一键获取所有依赖：

sudo apt update && sudo apt install -y git nodejs npm

这里有个小坑需要注意：Ubuntu仓库中的Node.js版本可能较旧。我建议通过nodesource获取新版：

curl -fsSL https://deb.nodesource.com/setup_16.x | sudo -E bash - sudo apt-get install -y nodejs

2.2 项目目录结构规划

良好的目录结构能让后续工作事半功倍。我通常这样组织：

~/projects/ ├── scratch-gui/ # 官方源码 └── scratch-app/ # Electron包装项目

这种分离的布局有个明显好处：当Scratch官方更新时，我们可以轻松更新源码而不影响Electron包装层。实际开发中，这种模块化思想非常重要。

3. 获取与编译Scratch3.0源码

3.1 克隆与版本选择

官方源码仓库位于GitHub，使用以下命令克隆：

git clone https://github.com/LLK/scratch-gui.git cd scratch-gui

查看可用版本时，建议选择最新的稳定版。以v3.10.2为例：

git checkout scratch-desktop-v3.10.2

3.2 依赖安装与编译

安装Node模块时，可能会遇到权限问题。我的经验是不要使用sudo，而是通过以下方式解决：

npm install --legacy-peer-deps npm audit fix

编译命令很关键，记得设置环境变量：

BUILD_MODE=dist npm run build

编译完成后，检查build目录是否生成以下关键文件：

• index.html
• lib.min.js
• static/ 资源目录

4. Electron应用封装实战

4.1 初始化Electron项目

在上级目录创建新项目：

mkdir scratch-app && cd scratch-app npm init -y

安装Electron时，建议锁定版本以避免兼容性问题：

npm install electron@9.1.0 --save-dev

创建主进程文件index.js，核心代码需要注意窗口尺寸适配：

const { width, height } = require('electron').screen.getPrimaryDisplay().workAreaSize; const win = new BrowserWindow({ width: Math.floor(width * 0.9), height: Math.floor(height * 0.9), webPreferences: { nodeIntegration: true, contextIsolation: false } });

4.2 集成Scratch3.0资源

将编译好的Scratch资源复制到项目中的dist目录：

mkdir dist && cp -r ../scratch-gui/build/* dist/

修改package.json，添加启动脚本：

"scripts": { "start": "electron .", "package": "electron-packager . --out=out --overwrite", "deb": "electron-installer-debian --src out/scratch-linux-x64/ --dest out/installers/ --arch amd64" }

5. 打包与分发优化

5.1 制作可执行程序

首先安装打包工具链：

npm install electron-packager electron-installer-debian --save-dev

执行打包命令时，可以添加更多优化参数：

npm run package -- --platform=linux --arch=x64 --icon=assets/icon.png

5.2 生成.deb安装包

创建专业的deb包需要配置更多元数据。我建议在项目根目录添加installer.json：

{ "dest": "out/installers/", "arch": "amd64", "categories": [ "Education" ], "description": "Scratch 3.0 Desktop for Linux", "productDescription": "Creative coding platform for kids", "homepage": "https://scratch.mit.edu", "mimeType": ["application/x-scratch-project"] }

然后使用扩展命令生成安装包：

electron-installer-debian --config installer.json

5.3 安装测试与问题排查

测试安装时，建议先卸载旧版本：

sudo apt remove scratch sudo dpkg -i out/installers/scratch_3.10.2_amd64.deb

常见问题及解决方案：

1. 缺少依赖：sudo apt --fix-broken install
2. 图标不显示：检查.desktop文件中的Icon路径
3. 启动缓慢：检查是否启用了硬件加速

6. 进阶优化技巧

6.1 应用图标与桌面集成

要让应用看起来更专业，需要准备多种尺寸的图标：

mkdir -p assets/icons convert -resize 256x256 logo.png assets/icons/256x256.png

创建.desktop文件时，注意设置正确的Categories：

Categories=Education;Development;

6.2 自动更新机制

虽然Scratch本身不常更新，但我们可以为Electron部分添加自动更新。首先安装依赖：

npm install electron-updater --save

然后在main.js中添加：

const { autoUpdater } = require('electron-updater'); autoUpdater.checkForUpdatesAndNotify();

6.3 性能优化建议

通过Chromium开发者工具分析性能瓶颈后，我总结了几点优化经验：

1. 启用硬件加速：

   app.commandLine.appendSwitch('enable-accelerated-2d-canvas');

2. 禁用不需要的功能：

   win.webContents.session.setPermissionRequestHandler(() => false);

3. 预加载常用资源：

   win.loadFile('dist/index.html', { extraHeaders: "Link: </static/assets/fonts.woff2>; rel=preload; as=font" });

7. 项目维护与扩展

7.1 版本更新策略

当Scratch发布新版本时，更新流程应该是：

1. 进入scratch-gui目录：

   git fetch --tags git checkout scratch-desktop-v3.x.x npm install npm audit fix

2. 重新编译并复制资源：

   BUILD_MODE=dist npm run build cp -r build ../scratch-app/dist/

3. 更新Electron依赖：

   cd ../scratch-app npm update electron

7.2 自定义功能开发

Electron的优势在于可以扩展原生功能。比如添加文件系统监控：

const chokidar = require('chokidar'); watcher = chokidar.watch(projectFolder, { ignored: /(^|[\/\\])\../, persistent: true });

还可以集成系统通知：

new Notification('Scratch 3.0', { body: '您的项目已自动保存' }).show();

7.3 多平台打包方案

虽然本文聚焦Linux，但Electron支持多平台打包。只需调整packager参数：

electron-packager . --platform=all --arch=all

对于macOS需要额外处理签名，Windows则需要NSIS打包工具。