打包方式
Eelectron 目前有两种打包工具 electron-builder 和 electron-packager
对 electron 应用进行打包的时候，需要我们先将我们代码打包为静态资源，然后再选择打包工具进行 exe 程序的打包。
使用 electron-builder 打包
安装依赖
yarn add electron-builder --save-dev
打包
- 在项目的
package.json文件中定义 name、description、version 和 author 信息。 - 在项目的
package.json文件中定义 build 字段：
"build": {
"appId": "Demo",
"productName": "productName",
"copyright": "Copyright © 2019 XXX",
"mac": {
"category": "public.app-category.type",
},
- 在
package.json中添加 scripts
"scripts": {
"pack": "electron-builder --dir",
"prepack": "npm run build",
"dist": "electron-builder",
"predist": "npm run build",
}
由于我们在打包应用程序之前需要先打包静态资源，那么在对应的命令之前加上 pre ，在执行这条命令 npm run pack 的时候，webpack 就会先自动执行 npm run prepack
- 在
main.js文件中引入path模块，将主进程的加载文件修改为静态资源的主文件index.html
…
const urlLocation = `file://${path.join(__dirname, "./index.html")}`
- 打包
script 中配置了 prepack 和 predist，因此执行以下命令会自动先去执行 build 打包
- 生成应用文件
npm run pack
- 生成一个 exe 或者 dmg 文件
npm run dist
- 指定平台和架构
# windows 64bit
electron-builder --win --x64
# windows and mac 32bit
electron-builder --win --mac --ia32
使用 electron-packager 打包
安装依赖
yarn add electron-packager --save-dev
打包
- 在
package.json中添加 scripts
"scripts": {
"packager": "electron-packager <sourcedir> <appname> --platform=<platform> --arch=<arch> [optional flags...]"
}
最简单的就是直接运行 electron-pacager .进行打包。
默认情况下， appname 为 当前项目下的 package.json 文件中的 productName 或者 name 字段的值；platform 和 arch 则与主机一致，在 Windows 64位 下打包就是 Windows 64 位的版本。
- 打包
npm run packager
