使用 electron-builder 和 electron-p

打包方式

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