由於官方文件又比較生澀且沒有例子可參考，因此抽出時間整理了一篇文章，希望能夠幫助入坑的小夥伴！

0、說在前面的話

專案：官網electron-quick-start專案

專案使用環境：win10 64位

使用命令：npm

依賴：Node.js

特別鳴謝：本文中大量引用官網、程式如此靈動網站、CSDN博文、簡書博文等，感謝這些文章的作者。在參考文件中給出了這些引用的原文連結。

1、構建electron專案

下載electron-quick-start(該博文全部使用npm,所以需要安裝node,安裝過程自行百度)

並執行該專案

# Clone the Quick Start repository
git clone https://github.com/atom/electron-quick-start

# Install the dependencies and run
npm install && npm start
 

令執行結果如下：

注意：

1、除了使用上述命令下載electron-quick-start專案程式碼外，還可以直接到GitHub上下載該專案。

2、下載下來的electron-quick-start專案的package.json檔案中的electron版本可能已經過時了，此時在執行npm install&&npm start時會報錯。
錯誤類似如下：
    Downloading electron-v0.34.3-win32-ia32.zip
    Error: read ECONNRESET
這個錯誤說明兩個問題：1）需要升級electron；2）網路連線問題
所以針對上述兩個問題可以做如下處理：
    1）先說網路問題
    解決辦法：更換源為淘寶
    更換方法：執行如下兩條命令（更多資訊可檢視參考文件《開發electron程式的npm準備工作》）
        npm config set registry https://registry.npm.taobao.org/
        npm config set electron_mirror http://npm.taobao.org/mirrors/electron/
    2）升級electron，有兩種方法：
        一個是忽略，網路連線成功後，會在執行 npm install && npm start後會自動升級；
        二是手動執行 npm install electron --save-dev
3、特別提示，這些命令都需要在檔案當前路徑下執行
 

此，簡單的demo就算執行出來了。

2、打包

對electron專案打包方法有很多，常用的有兩種：electron-packager和electron-builder  這些打包方法都需要根據專案中的package.json檔案進行。欄位全解可以參考package.json欄位全解。下面在具體介紹兩種方法時也會有修改，請注意。

electron-packager

下面的僅僅是個範例，不能保證和你的實際情況相吻合。

electron-packager . --overwrite --platform=darwin --arch=x64 --out=out --icon=assets/app-icon/mac/app.icns --osx-sign.identity='Developer ID Application: GitHub' --extend-info=assets/mac/info.plist

electron-packager . --overwrite --platform=win32 --arch=ia32 --out=out --icon=assets/app-icon/win/app.ico

electron-packager . --overwrite --platform=linux --arch=x64 --out=out
 

electron-packager 的安裝（electron-packager依賴Node.js，需要提前安裝好）

# for use in npm scripts
npm install electron-packager --save-dev

# for use from cli
npm install electron-packager -g

注意：上面兩步操作都是必須的。

使用方法

使用方法參見上面範例中給出的三種方式。同時，可以將其放入package.json中，直接執行npm run package即可完成打包，如下

"scripts": {
    "package": "electron-packager . --platform=win32 --arch=ia32 --electron-version=1.4.15 --overwrite --ignore=node_modules --ignore=.gitignore"
},

例中，我的系統是win10,64位，該專案version是1.0.0，打包後項目名稱為helloworld，放在專案當前路徑下。所以修改之後的命令如下：

"scripts": {
    "start": "electron .",
    "package":"electron-packager . helloworld --platform=win32 --arch=x64 --electron-version=1.0.0 --overwrite --ignore=node_modules --ignore=.gitignore"
  },

行打包命令

npm run package

執行結果

在當前專案下生成一個helloworld-win32-x64的資料夾，裡面有一個名為helloworld.exe的可執行檔案。 

至此，使用electron-packager打包專案完成。想了解更多關於electron-packager，可以閱讀electron-packager、常用Electron App打包工具  如果想替換icon，只需要在命令後邊加上–icon=your-icon-path/app.ico即可。

electron-builder

builder --mac
builder --win
builder --linux

安裝electron-builder

# for use in npm scripts
npm install electron-builder --save-dev

修改package.json

將如下內容是放入package.json。對於build中每個屬性的解讀，請閱讀Electron學習筆記Part3-利用Electron builder應用打包EXE。本例中，專案名稱為electron-quick-start，appId使用productName

"build": {
    "productName": "electron-quick-start",
    "appId": "electron-quick-start",
    "directories": {
      "output": "build"
    },
    "files": [
      "./*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "assets/app-icon/win/app.ico"
    },
    "linux": {
      "icon": "build/icons"
    }
  }

這裡需要注意兩點：

1、files屬性裡寫的是指定被打包的檔案，可以忽略不需要打包的檔案。根據我的檔案結構，我將其改成"./*"，意思是當前目錄下的全部檔案。
2、如果需要修改icon,將icon的路徑指定到相應的目錄即可。

執行打包命令

electron-builder --win

打包結果

參考文件