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

怼烎@ 2022-04-25 08:16 941阅读 0赞

有时候需要把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;