打包方式

Eelectron 目前有兩種打包工具 electron-builder 和 electron-packager

對(duì) electron 應(yīng)用進(jìn)行打包的時(shí)候，需要我們先將我們代碼打包為靜態(tài)資源，然后再選擇打包工具進(jìn)行 exe 程序的打包。

使用 electron-builder 打包

安裝依賴

yarn add electron-builder --save-dev

打包

• 在項(xiàng)目的 package.json 文件中定義 name、description、version 和 author 信息。
• 在項(xiàng)目的 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",
}

由于我們?cè)诖虬鼞?yīng)用程序之前需要先打包靜態(tài)資源，那么在對(duì)應(yīng)的命令之前加上 pre ，在執(zhí)行這條命令 npm run pack 的時(shí)候，webpack 就會(huì)先自動(dòng)執(zhí)行 npm run prepack

• 在 main.js 文件中引入 path 模塊，將主進(jìn)程的加載文件修改為靜態(tài)資源的主文件 index.html

…
const urlLocation = `file://${path.join(__dirname, "./index.html")}`

• 打包

script 中配置了 prepack 和 predist，因此執(zhí)行以下命令會(huì)自動(dòng)先去執(zhí)行 build 打包

• 生成應(yīng)用文件

npm run pack

• 生成一個(gè) exe 或者 dmg 文件

npm run dist

• 指定平臺(tái)和架構(gòu)

# 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...]"
}

最簡(jiǎn)單的就是直接運(yùn)行 electron-pacager .進(jìn)行打包。

默認(rèn)情況下， appname 為 當(dāng)前項(xiàng)目下的 package.json 文件中的 productName 或者 name 字段的值；platform 和 arch 則與主機(jī)一致，在 Windows 64位 下打包就是 Windows 64 位的版本。

• 打包

npm run packager