有时候需要把electron配置开发,生产等多个环境并对多个环境分别打包,谷歌了相关帖子,实现了相关逻辑(可能使用webpack会更好,因为官方示例应用没有给出webpack方案就不折腾了),解决中遇到的问题及方案整理如下:
一、配置多环境
新建config目录用来保存不同环境的配置(dev.js,prod.js)
如dev.js代码
let config = {
"API_PROTOCOL": "http:",
"API_HOSTNAME": "dev.xxx.net",
"API_PATH": "http://dev.xxx.net"
}
module.exports = config;
二、安装相关依赖
读取config目录下的环境配置文件需要安装config
打包应用需要electron-packager,electron-builder(可打包成安装程序,且包的体积更小),
cross-env 可兼容windows用以启动时切换环境
rimraf 删除目录及文件,为了兼容windows
os 判断当前操作系统类型
三、启动时的多环境,在命令行最后一个参数增加环境参数,即文件名如:dev,
执行npm run start 如果未打包取命令行最后一个参数
四、electron-builder打包工具的配置在build命令,productName即为打包后的exe的name,可以在命令中增加代码 --config.productName=DEMO-electron-dev实现,执行npm run build或者npm run build:prod
electron-packager的appname直接在命令行中体现electron-packager . DEMO-electron-dev中的DEMO-electron-dev为exe文件的name
执行npm run package:win 或者 npm run package:win-prod
五、关键代码在主入口文件index.js
背后的逻辑是读取了命令行参数的最后一个参数,打包后这个参数实际就是exe文件所在的位置
// 获取命令行参数
global.sharedObject = {env: process.argv};
// 判断程序是否已打包
let isPackaged = app.isPackaged;
// 未打包取最后一个参数,如果已打包则截取exe名字的的环境相关部分
let start = process.argv[process.argv.length - 1].lastIndexOf('-') + 1;
let end = process.argv[process.argv.length - 1].lastIndexOf('.');
if(!isPackaged){
env = process.argv[process.argv.length-1]
} else {
if (os.type === 'Windows_NT') {
env = process.argv[process.argv.length-1].substring(start,end);
} else {
env = process.argv[process.argv.length-1].slice(start);
}
}
// 取自appname
if(env === 'electron') {
env = 'prod';
}
const config = require('./config/' + env);
let url = config.API_PATH;
console.log('API_PATH', url);
完整的package.json
{
"name": "DEMO-electron",
"version": "0.0.1",
"description": "DEMO-electron",
"main": "./index.js",
"build": {
"appId": "com.xxx",
"mac": {
"target": [
"dmg",
"zip"
]
},
"win": {
"target": [
"nsis",
"zip"
],
"icon": "./assets/app-icon/win/app.ico"
},
"productName": "DEMO-electron",
"directories": {
"output": "build"
}
},
"scripts": {
"start": "cross-env NODE_ENV=daily electron . dev",
"prod": "cross-env NODE_ENV=prod electron . prod",
"dev": "electron . --debug daily",
"build": "rimraf build && electron-builder --win --x64 --config.productName=DEMO-electron-dev",
"build:prod": "rimraf build && electron-builder --win --x64 --config.productName=DEMO-electron",
"build:mac": "rm -rf build && electron-builder --mac --x64 --config.productName=DEMO-electron-dev",
"package:mac": "electron-packager . DEMO-electron --platform=darwin --arch=x64 --overwrite --icon=./assets/app-icon/mac/app.icns --out=out --asar --app-version=0.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md)\" --extra-resource=\"./assets\" --extra-resource=\"./config\"",
"package:win": "electron-packager . DEMO-electron-dev --platform=win32 --arch=ia32 --overwrite --icon=./assets/app-icon/win/app.ico --out=out --asar --app-version=0.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md)\" --extra-resource=\"./assets\" --extra-resource=\"./config\"",
"package:win-prod": "electron-packager . DEMO-electron --platform=win32 --arch=ia32 --overwrite --icon=./assets/app-icon/win/app.ico --out=out --asar --app-version=0.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md)\" --extra-resource=\"./assets\" --extra-resource=\"./config\"",
"package:linux": "electron-packager . DEMO-electron --platform=linux --arch=x64 --overwrite --out=out --asar --app-version=0.0.1 --ignore=\"(dist|src|docs|.gitignore|LICENSE|README.md)\" --extra-resource=\"utils\"",
"prepackage": "rm -rf out",
"package": "npm run package:mac && npm run package:win && npm run package:linux"
},
"author": "xxx",
"license": "ISC",
"devDependencies": {
"config": "^3.1.0",
"cross-env": "^5.2.0",
"electron": "^4.1.5",
"electron-builder": "^20.41.0",
"electron-packager": "^13.1.1",
"rimraf": "^2.6.3"
},
"dependencies": {
"electron-settings": "^3.2.0",
"fs-extra": "^8.0.1",
}
}
附一:electron-builder打包命令
{
"build": "rimraf build && electron-builder --win --x64 --config.productName=DEMO-electron-daily",
"build:prod": "rimraf build && electron-builder --win --x64 --config.productName=DEMO-electron",
"build:mac-daily": "rm -rf build && electron-builder --mac --x64 --config.productName=DEMO-electron-daily",
"build:mac-prod": "rm -rf build && electron-builder --mac --x64 --config.productName=DEMO-electron",
"build:linux-prod": "rm -rf build && electron-builder --linux --x64 --config.productName=DEMO-electron",
}
附二: 获取全局env
const env = remote.getGlobal('sharedObject').env;