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",