应用场景:开发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
出现 timeout 连接问题
在文件夹下增加.npmrc文件
内容为
执行: cnpm run-script package
成功,很明显 packager更好用