Scratch 3.0 是一款基于浏览器的编程工具,它并没有直接提供打包成 EXE 文件的功能。要将 Scratch 3.0 项目 (已经保存为 .sb3 格式的文件) 打包成 Windows 可执行的 EXE 文件,需要特定的工具和一定的操作步骤。其中一个有效的方法是使用 Electron 和 scratch-gui。
下面是将 Scratch 3.0 项目打包成 EXE 文件的详细步骤:
1. 安装 Node.js
要将 Scratch 项目打包成 EXE,首先需要安装 Node.js。访问 Node.js 官网 (https://nodejs.org/) 下载并安装它。安装完成后,检查安装情况,可以在命令行输入如下命令:
```
node --version
npm --version
```
如果能看到版本号,说明安装成功。
2. 将 Scratch 3.0 项目与 scratch-gui 结合
scratch-gui 是一个开源项目,可以实现本地运行 Scratch 3.0。访问 https://github.com/LLK/scratch-gui 下载 scratch-gui 源代码。
打开命令行提示符,在 scratch-gui 文件夹路径下运行如下命令安装依赖:
```
cd scratch-gui
npm install
```
通过以下命令启动开发服务器:
```
npm start
```
在浏览器输入 http://localhost:8601 查看运行情况。
3. 与 Electron 集成
Electron 是一个用于构建跨平台桌面应用程序的开源框架。可以根据你的 Scratch 项目构建一个 EXE 文件。首先安装 electron-save-file-dialog,用于在 EXE 文件中实现文件打开、保存功能。
```
npm install electron-save-file-dialog
```
然后在 scratch-gui 文件夹下创建 main.js 文件,添加以下代码:
```javascript
const { app, BrowserWindow, ipcMain, dialog } = require("electron");
const saveDialog = require("electron-save-file-dialog");
const path = require("path");
const url = require("url");
let mainWindow;
function createWindow() {
mainWindow = new BrowserWindow({
width: 1280,
height: 800,
webPreferences: {
nodeIntegration: true,
webSecurity: false,
},
});
mainWindow.loadURL(
url.format({
pathname: path.join(__dirname, "/build/index.html"),
protocol: "file:",
slashes: true,
})
);
mainWindow.on("closed", () => {
mainWindow = null;
});
}
app.on("ready", createWindow);
app.on("window-all-closed", () => {
if (process.platform !== "darwin") {
app.quit();
}
});
app.on("activate", () => {
if (mainWindow === null) {
createWindow();
}
});
```
接下来修改 `index.ejs` 文件,添加以下代码,设置 Electron 通信的依赖项:
```html
...
...
const electron = require("electron");
const { ipcRenderer } = electron;
window.ipcRenderer = ipcRenderer;
...
```
更新 `webpack.config.js` 的生产环境中的 `publicPath`,将其设置为 `./`。
```javascript
// 在 module.exports 内修改
module.exports = {
...
output: {
...
publicPath: process.env.NODE_ENV === 'production' ? './' : '/',
...
},
...
}
```
接下来,更新 package.json 添加 electron:
```json
{
...
"scripts": {
"start": "cross-env NODE_ENV=development webpack-dev-server --content-base ./static",
"electron-start": "electron ."
},
...
}
```
然后运行命令打包 Scratch-GUI:
```bash
npm run build
npm run electron-start
```
如果一切正常,你将看到一个 Electron 窗口运行 Scratch 3.0。此时,我们已经将 Scratch 项目集成到 Electron。
4. 项目文件打包
接下来,使用 Electron 打包工具 electron-builder 对项目进行打包。首先安装 electron-builder:
```bash
npm install electron-builder --save-dev
```
然后更新 package.json 文件:
```json
{
...
"scripts": {
...
"pack": "electron-builder --dir",
"dist": "electron-builder"
},
"build": {
"appId": "your.app.id",
"productName": "YourProductName",
"win": {
"target": [
"nsis"
]
}
}
}
```
现在,运行以下命令构建 EXE 文件:
```bash
npm run dist
```
构建成功后,在 scratch-gui 文件夹下的 “dist” 目录中,你将找到名为 "YourProductName Setup" 的安装文件,其中包含了你的 Scratch 3.0 项目。
此时,你已经成功地将 Scratch 3.0 项目打包成 EXE 文件。对于其他用户,他们可以通过安装这个 EXE 文件来浏览并运行你的 Scratch 项目。