当前位置：首页 > article >正文

使用electron 打包构建cocosCreator 的window exe

article 2024/10/24 23:22:34

应用场景：开发B站弹幕游戏，需要发布exe

electron 官网中文文档应用程序打包 | Electron

安装electron 重要的过程使用使用淘宝源来安装。

npm install -g cnpm --registry=https://registry.npm.taobao.org

构建一个npm 工程

使用npm 安装会失败

使用cnpm 安装成功了

package.json中使用electron启动，增加start启动

工程下创建入口脚本index.js

里面增加代码

运行electron 测试。 npm start

将cocos build出来的web-mobile 拷贝到工程内

修改index.js 代码，加载游戏的Index.html

安装Electron Forge工具

npm install --save-dev @electron-forge/cli

npx electron-forge import

执行npx这个命令时，出问题，看下面

运行npx electron-foge import 失败。一直卡在下载依赖包这里。

关闭，重新进入，运行cnpm i 等待安装完成

试一试可不可以cnpm run make

执行时候报错

只能按照他的提示试一试。

npm install -g npm@10.9.0

搞来搞去，还是因为不能翻墙的原因，索性就为了工作和研究购买了一个翻墙账号并充值。用来来发电。

节点买的是这个，https://jxdy.top/login 推荐一下。挺不错的

安装包有两个，window 和APK ，流量是通用的

购买之后，执行npx electron-forge import 就很愉快了。

上面的方式是使用npm翻墙下载了依赖。如果想使用cnpm 使用淘宝源去弄的话。

查看下.npmrc的文件路径

增加两项

prefix=D:\Program Files\nodejs\node_global

cache=D:\Program Files\nodejs\node_cache

registry=https://registry.npmjs.org

electron_builder_binaries_mirror=https://npm.taobao.org/mirrors/electron-builder-binaries/

electron_mirror=https://npm.taobao.org/mirrors/electron/

strict-ssl=false

修改完这个文件之后，再执行npx electron-forge import

如果你成了，恭喜你，如果不成，我觉得最好还是翻一下墙。

等待npx 的import 执行完后，

修改package.json 中的description 和author

执行命令： npm run make

发现依旧有报错

依旧没有构建出来。这个东西，没遇上的觉得事情很简单，遇上的，就很耗时。我就是一直卡着installing dependencies 很久。最后发现下载后了，走完了流程，依旧是不对的。从配置来看，其实还是npx electron-force import 还是没有成功。因为成功了就很增加很多相关配置。

成功之后应该是这样的

最后执行 npm run make

另外一种方式，使用electron-packager打包

在force使用之前是一样的，一样的按照electron

注意要使用下面的命令

cnpm install electron

不然继续使用下面这边，不然会有一些奇奇怪怪的包依赖的问题，比如get什么的。别问我怎么知道

cnpm install electron --save-dev

拷贝web-mobile工程

添加启动脚本index.js

这时开始不用，使用packager

cnpm install electron-packager --save-dev

修改index.js

* @Author: xhd

* @Date: 2024-10-19 17:39:24

* @FilePath: \start\index.js

* @LastEditTime: 2024-10-19 21:53:47

* @Description: Do not edit

// app模块控制应用程序的事件生命周期。

// BrowserWindow模块创建和管理应用程序窗口。

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

/** 创建窗口 */

const createWindow = () => {

const mainWindow = new BrowserWindow();

// 加载 index.html

mainWindow.loadFile("web-mobile/index.html");

};

// 这段程序将会在 Electron 结束初始化和创建浏览器窗口的时候调用

// 部分 API 在 ready 事件触发后才能使用。

app.whenReady().then(() => {

// 创建窗口

createWindow();

});

// 当所有窗口都被关闭的时候退出程序。

app.on("window-all-closed", () => {

app.quit();

});

修改package.json配置

{

"name": "dmyxtowin",

"version": "1.0.0",

"description": "ymyx",

"main": "index.js",

"out": "../output",

"platform": "win32",

"arch": "x64",

"scripts": {

"start": "electron .",

"package": "electron-packager ./ start --platform=win32 --out=release --arch=x64 --overwrite --download.mirrorOptions.mirror=https://npm.taobao.org/mirrors/electron/ --ignore=node_modules"

"author": "xhd",

"license": "ISC",

"devDependencies": {

"electron": "^33.0.1",

"electron-packager": "^17.1.2"

"dependencies": {

"@electron/get": "^3.1.0",

"electron": "^33.0.1"

}

你装什么版本，这里写什么版本

修改完成后 cnpm run-script package