现状
本人最近在做一个electron项目，使用的是electron-egg这个基础项目，项目里在请求后台接口时需要区分生产环境和测试环境，每次构建前都需要去手动修改导出config的文件，然后再构建。 承接上一篇文章，做个补充electron 应用根据构建命令打包不同环境的实现方案（一）。
electron-egg介绍
- 使用的是第三方的基础项目，官网文档说明见electron-egg打包。
需要拓展开发环境和生产环境。
更改配置文件
- 1 新增配置文件electron/config/builder.test.json。 其中打包生成文件放置在outtest文件夹中。增加extraMetadata中mode参数，用于区分测试还是生产。
{
"productName": "ee-test",
"appId": “..”.,
"copyright": “.”..,
"directories": {
"output": "outtest"
},
"asar": true,
"afterSign": "build/notarization/notarize.js",
"files": [
"**/*",
"!frontend/",
"!run/",
"!logs/",
"!go/",
"!data/",
"!doc/",
"!out/"
],
"extraResources": {
"from": "build/extraResources/",
"to": "extraResources"
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "build/icons/icon.ico",
"uninstallerIcon": "build/icons/icon.ico",
"installerHeaderIcon": "build/icons/icon.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": “tést”
},
"mac": {
"icon": "build/icons/icon.icns",
"artifactName": "${productName}-${os}-${version}-${arch}.${ext}",
"darkModeSupport": true,
"hardenedRuntime": false
},
"win": {
"icon": "build/icons/icon.ico",
"artifactName": "${productName}-${os}-${version}-${arch}.${ext}",
"target": [
{
"target": "nsis"
}
]
},
"linux": {
"icon": "build/icons",
"artifactName": "${productName}-${os}-${version}-${arch}.${ext}",
"target": ["deb"],
"category": "Utility"
},
"extraMetadata": {
"mode": "test"
}
}
- 2 修改配置文件
- 配置文件electron/config/builder.json。files参数增加test模式下打包文件的过滤"!outtest/"，减少打包后文件大小；增加extraMetadata下mode参数；
{
"productName": "ee",
"appId": "...",
"copyright": "...",
"directories": {
"output": "out"
},
...
"files": [
"**/*",
"!frontend/",
"!run/",
"!logs/",
"!go/",
"!data/",
"!doc/",
"!outtest/"
],
。。。
"extraMetadata": {
"mode": "prod"
}
}
- 3.修改配置文件package.json。
- 增加命令 "build-m-arm64-test": "electron-builder --config=./electron/config/builder.test.json -m --arm64"
"build-m-arm64": "electron-builder --config=./electron/config/builder.json -m --arm64",
"build-m-arm64-test": "electron-builder --config=./electron/config/builder.test.json -m --arm64"
-
- 根据打包参数修改http业务后台地址。
- 首先读取打包参数。然后根据打包参数的值，最终获取需要用到的http后台配置地址。
const fs = require("fs");
const { app: electronApp } = require("electron");
const path = require("path");
const Log = require("ee-core/log");
const Conf = require("ee-core/config");
/**
* 根据打包参数， 更改后台服务请求地址。
* 打包参数配置请参考 electron/config/builder.test.json
* "extraMetadata": {
"mode": "test"
}
*/
function getProjConfig() {
let modeValue = "test";
// 读取package.json文件
const packagePath = path.join(electronApp.getAppPath(), "package.json");
// Log.info(`[getProjConfig] packagePath: ${packagePath}`);
const packageJson = JSON.parse(fs.readFileSync(packagePath, "utf8"));
// Log.info(`[getProjConfig] packageJson: ${JSON.stringify(packageJson)}`);
// 获取extraMetadata中的foo属性
if (packageJson && packageJson.mode) {
modeValue = packageJson.mode;
} else {
modeValue = "test"; // 如果没有找到mode属性，可以使用默认值
}
Log.info(`[getProjConfig] modeValue: ${modeValue}`);
let configSuff = "httpClientTest"; //配置文件后缀
if (modeValue === "test") {
// 使用httpClientTest配置覆盖httpClient
configSuff = "httpClientTest";
} else if (modeValue === "prod") {
// 使用httpClientProd配置覆盖httpClient
configSuff = "httpClientProd";
} else {
// 使用httpClient配置
configSuff = "httpClientTest";
}
const httpClient = Conf.getValue(configSuff);
// Log.info(`[getProjConfig] httpClient: ${JSON.stringify(httpClient)}`);
if (httpClient && httpClient.httpUrl && httpClient.webSocketUrl) {
Conf.setValue("httpClient.httpUrl", httpClient.httpUrl);
Conf.setValue("httpClient.webSocketUrl", httpClient.webSocketUrl);
Conf.setValue("httpClient.mode", modeValue);
const httpClient_httpUrl = Conf.getValue("httpClient.httpUrl");
Log.info(`[getProjConfig] httpClient_httpUrl: ${httpClient_httpUrl}`);
}
}
-
- 在初始化后调用
- electron/index.js文件中调用第四步的方法。
class Index extends Application {
constructor() {
super();
// this === eeApp;
}
/**
* core app have been loaded
* 加载
* config -> service -> controller -> socket -> ready()
*/
async ready() {
// do some things
getProjConfig();
}
。。。
}
- 6 打包
// 测试环境和正式环境打包示例
rm -rf out // 清除之前正式环境的打包结果
rm -rf outtest // 清除之前测试环境的打包结果
npm run build-frontend // 构建 并 移动
npm run clean // 清除加密的代码
npm run encrypt // 代码加密
npm run build-m-arm64-test // 测试环境打包
npm run build-m-arm64 // 正式环境打包
最后在out 和outtest下可以找到最终打包的包。
