把cocos生成的web资源打包成exe

将Cocos生成的Web资源打包成EXE文件，使得我们可以方便地在Windows系统上运行和分发游戏或应用。这项工作通常涉及使用Electron、NW.js等工具，这里我们将以Electron为例进行详细介绍。

一、环境准备

在开始之前，请确保已安装以下软件：

1. Node.js：因为Electron依赖Node.js来构建应用，建议使用最新的稳定版本。
2. Cocos Creator：你需要创建并导出你的项目为Web平台。

二、导出Cocos项目

首先，在Cocos Creator中，打开你的项目，然后选择“构建”，选择Web平台，并输出到一个干净的文件夹，如“build/web”。

三、创建Electron项目

接下来，我们需要创建一个Electron项目。可以在你的工作目录中执行以下命令：

mkdir my-cocos-app
cd my-cocos-app
npm init -y
npm install electron --save-dev

这将创建一个新的文件夹并安装Electron。

四、设置Electron主文件

在项目根目录下，创建一个名为 main.js 的文件，内容如下：

const { app, BrowserWindow } = require('electron');
const path = require('path');

function createWindow () {
    // 创建浏览器窗口
    const win = new BrowserWindow({
        width: 800,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        }
    });

    // 加载刚才在Cocos中导出的Web资源
    win.loadFile(path.join(__dirname, 'build/web/index.html'));
}

// 在Electron完成初始化时调用createWindow
app.whenReady().then(createWindow);

// 关闭窗口时退出程序
app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (BrowserWindow.getAllWindows().length === 0) {
        createWindow();
    }
});

在此代码中，我们创建了一个新的浏览器窗口，并加载了Cocos生成的HTML文件。

五、修改package.json

接下来，修改 package.json 文件，添加以下脚本和配置：

{
  "name": "my-cocos-app",
  "version": "1.0.0",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "pack": "electron-packager . my-cocos-app --platform=win32 --arch=x64"
  },
  "devDependencies": {
    "electron": "^latest_version_here"
  }
}

在这里，我们添加了两个脚本：start 用于启动应用，pack 用于打包成EXE。

六、打包应用

确保你的Cocos项目已经构建并放置在 build/web 文件夹下。然后，在终端中运行以下命令：

npm run pack

这个命令会使用electron-packager打包你的应用，并生成一个可执行文件。

七、运行EXE文件

在打包完成后，你可以在输出目录中找到生成的EXE文件，直接双击它，即可启动你的Cocos应用。

八、总结

通过上述步骤，我们成功地将Cocos生成的Web资源打包成了一个Windows下的可执行文件。这个过程不仅仅适用于Cocos项目，还可以用于其他HTML5项目的打包。希望本文能帮助你顺利地将自己的游戏或应用分发给更多的用户。