electron-builder electron-packager 打包不同环境的应用

有时候需要把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;
  • 0
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
评论 11
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值