本文采用electron结合angular-electron框架开发桌面应用。electron开发的客户端可以跨平台&＃xff0c;一套代码可以打包成不同操作系统的应用包括主流的&＃xff1a;windows&＃xff0c;mac&＃xff0c;linux。通过
{"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"]}
}
以上是打包时的基本配置项。
最近开发的一个项目中遇到&＃xff0c;开发一个桌面应用给两个用户群体使用&＃xff0c;这两个用户群体的所使用的客户端的功能80%是相同的&＃xff0c;而且后期也不会有很大的差异。这时就面临一个问题是用两套代码分别打包维护&＃xff0c;还是使用一套代码&＃xff0c;通过配置一些参数来控制打包。由于后期如果有优化需求&＃xff0c;那么需要在两份代码中分别修改&＃xff0c;相当于改两便&＃xff0c;这是比较麻烦的。最后决定采用第二种解决方案。
具体的实施&＃xff1a;
1、在整个项目中提取出一个公共的参数来标识不同的app&＃xff0c;从而控制app内部一些视图的展示与否&＃xff0c;或者功能的可用性
{appClass: 0 //0,1分别代表不同用户群体的app
}
2、两个app的名字不同可以通过在打包时加入
--config参数可以动态的配置参数&＃xff0c;例如修改app的名称&＃xff0c;--config.productName&＃61;"appName"。这样就解决到了app名字的问题
3、我们怎么第一步的公共参数带入呢&＃xff0c;这里我的方法是&＃xff1a;
首先在根目录下定义两个配置文件devEnv.ts, officeEnv.ts&＃xff0c;大致的格式如下
{env: 1 //这里env参数代表不同的客户端
}
env参数1和0区分两个app
其次在第一步公共参数文件中引入env.ts
import env from &＃39;env.ts&＃39;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&＃61;&＃39;newAppName&＃39; --config.directories.output&＃61;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&＃61;app-mac/mac-dev",
京公网安备 11010802041100号