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%是相同的，而且后期也不會有很大的差異。這時就面臨一個問題是用兩套代碼分別打包維護，還是使用一套代碼，通過配置一些參數來控制打包。由於后期如果有優化需求，那么需要在兩份代碼中分別修改，相當於改兩便，這是比較麻煩的。最后決定采用第二種解決方案。

具體的實施：

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

{
   appClass: 0 //0,1分別代表不同用戶群體的app          
}

　　

2、兩個app的名字不同可以通過在打包時加入

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

3、我們怎么第一步的公共參數帶入呢，這里我的方法是：

首先在根目錄下定義兩個配置文件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",