Electron教程（3）如何打包 electron 程式：electron-forge 的使用教程

前言
最近自己有個小的需求，是做一個能編輯本地特定文本的工具，需要跨平臺， Windows 和 macOS，這樣，如果用原生開發的話，Windows 就要用 c# macOS 就要用 swift，學習成本高，并且學完用處也不是很大，
我本身是前端開發的，發現了這個 electron 能滿足我的需求，跨平臺運行，內部是 js 驅動的，簡直就是如魚得水，
順便把學習的經歷寫出來，分享需要的人，我會按標題序號漸進式地撰寫內容，
如果你喜歡這個文章，歡迎點贊評論支持，

一、安裝 electron-forge 是干嘛的

electron-forge 可以自動檢測你的系統，然后打包成對應的可執行檔案，
它可以實作 package 成最終可用的獨立專案檔案夾，
還可以 make 成能夠安裝的 zip 包

二、安裝 electron-forge

還是按之前教程（1）的目錄結構開始

添加 electron-forge 開發依賴，你可以使用指令添加

npm i -D @electron-forge/cli

也可以直接在 package.json 中添加，然后再運行 npm i 或 yarn
這兩種方式是等價的，我一般習慣后者

  "devDependencies": {
    "electron": "^13.1.7",
    "@electron-forge/cli": "^6.0.0-beta.58"
  }

三、初始化 electron-forge

electron-forge 在使用之前需要初始化一下，它會自動改變 package 的內容，然后添加幾個打包的指令，不需要自己手動添加，很方便

npx electron-forge import

運行成功

來看下 package.json 的變化

之前的 package.json

{
  "name": "electron-demo",
  "version": "0.1.0",
  "private": true,
  "author": {
    "name": "KyleBing",
    "email": "kylebing@163.com"
  },
  "description": "demo-electron",
  "main": "app.js",
  "scripts": {
    "start": "electron ."
  },
  "devDependencies": {
    "electron": "^13.1.7"
  }
}

之后的 package.json

{
  "name": "electron-demo",
  "version": "0.1.0",
  "private": true,
  "author": {
    "name": "KyleBing",
    "email": "kylebing@163.com"
  },
  "description": "demo-electron",
  "main": "app.js",
  "scripts": {
    "start": "electron-forge start",
    "package": "electron-forge package",
    "make": "electron-forge make"
  },
  "devDependencies": {
    "@electron-forge/cli": "^6.0.0-beta.58",
    "@electron-forge/maker-deb": "^6.0.0-beta.58",
    "@electron-forge/maker-rpm": "^6.0.0-beta.58",
    "@electron-forge/maker-squirrel": "^6.0.0-beta.58",
    "@electron-forge/maker-zip": "^6.0.0-beta.58",
    "electron": "^13.1.7"
  },
  "dependencies": {
    "electron-squirrel-startup": "^1.0.0"
  },
  "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "electron_demo"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }
}

四、生成可執行檔案夾 和 打包

可以看到在 初始化之后 多出了兩個指令，分別對應：

• 生成可執行檔案夾 pacakge
• 打包 make

在 make 之前，需要先將專案 package，這個在你執行 npm run make 的時候也會提示你

1. pacakge

npm run package

運行成功后，會輸出到專案目錄的 out 目錄下

2. make

npm run make

make 之后會輸出到專案目錄的 out/make 下

五 關于一次性生成多個平臺【未完，待更】

配置在 package.json 的 config 中，現在我還沒到那一步，需要的時候再更新這塊，反正就是在這塊配置，具體看 electron-forge 官網就知道了

 "config": {
    "forge": {
      "packagerConfig": {},
      "makers": [
        {
          "name": "@electron-forge/maker-squirrel",
          "config": {
            "name": "electron_demo"
          }
        },
        {
          "name": "@electron-forge/maker-zip",
          "platforms": [
            "darwin"
          ]
        },
        {
          "name": "@electron-forge/maker-deb",
          "config": {}
        },
        {
          "name": "@electron-forge/maker-rpm",
          "config": {}
        }
      ]
    }
  }