scratch3

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

...

...

...

```

更新 `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 项目。