electron打包配置方案

本文采用electron結合angular-electron框架開發桌面應用。electron開發的客戶端能夠跨平臺，一套代碼能夠打包成不一樣操做系統的應用包括主流的：windows，mac，linux。經過

electron-builder模塊進行打包，electron-builder.json是其配置文件：

{
  "productName": "",//打包後的app名稱
  "directories": {
    "output": "app-builds"//打包輸出的路徑
  },
　//配置打包的文件
  "files": [
      "**/*",
      "!*.ts",
      "!*.code-workspace",
      "!LICENSE.md",
      "!package.json",
      "!package-lock.json",
      "!src/",
      "!e2e/",
      "!hooks/",
      "!.angular-cli.json",
      "!_config.yml",
      "!karma.conf.js",
      "!tsconfig.json",
      "!tslint.json"
  ],
　　//打包windows的配置
  "win": {
    "icon": "dist",
    "target": [
      "portable"
    ]
  },
　//打包mac的配置
  "mac": {
    "icon": "dist",
    "target": [
      "dmg"
    ]
  },
  //打包linux的配置
  "linux": {
    "icon": "dist",
    "target": [
      "AppImage"
    ]
  }
}

　以上是打包時的基本配置項。

最近開發的一個項目中遇到，開發一個桌面應用給兩個用戶羣體使用，這兩個用戶羣體的所使用的客戶端的功能80%是相同的，並且後期也不會有很大的差別。這時就面臨一個問題是用兩套代碼分別打包維護，仍是使用一套代碼，經過配置一些參數來控制打包。因爲後期若是有優化需求，那麼須要在兩份代碼中分別修改，至關於改兩便，這是比較麻煩的。最後決定採用第二種解決方案。

具體的實施：

一、在整個項目中提取出一個公共的參數來標識不一樣的app，從而控制app內部一些視圖的展現與否，或者功能的可用性

{
   appClass: 0 //0,1分別表明不一樣用戶羣體的app          
}

　　

二、兩個app的名字不一樣能夠經過在打包時加入

--config參數能夠動態的配置參數，例如修改app的名稱，--config.productName="appName"。這樣就解決到了app名字的問題

三、咱們怎麼第一步的公共參數帶入呢，這裏個人方法是：

首先在根目錄下定義兩個配置文件devEnv.ts, officeEnv.ts，大體的格式以下

{
  env: 1  //這裏env參數表明不一樣的客戶端    
}

　env參數1和0區分兩個app

其次在第一步公共參數文件中引入env.ts

import env from 'env.ts'

export default {
     env: env.env
}　

最後改造packjson中的啓動項

"electron:mac-office": cp officeEnv.ts ./src/app/env.ts && npm run build:prod && npx electron-builder build --mac --config.productName='newAppName' --config.directories.output=app-mac/mac-office",
"electron:mac": "cp devEnv.ts ./src/app/env.ts && npm run build:prod && npx electron-builder build --mac --config.directories.output=app-mac/mac-dev",