我們通過Electron框架開發客戶端，在打包應用程式時通過electron-builder外掛來打包應用程式會相對簡單。

1、首先通過npm install electron-builder --save下載該外掛

2、下載完成後在跟目錄新建electron-builder.json配置檔案,

下面介紹配置項，首先productName為應用程式的名稱

directories引數中的output問應用程式生成的路徑

files比較重要用來配置哪些檔案會被打包哪些檔案不會被打包

win引數是配置windows應用程式的的配置，icon為應用程式的圖示，target為應用程度要打包的方式，windows的話支援portable打包成免安裝檔案，nisis，zip等等方式

mac為配置mac os系統的應用程式，linux為配置生成linux系統的應用程式。

{

"productName": "appName",
  "directories": {
    "output": "app-builds"
  },"files": [
      "**/*",
      "!*.ts",
      "!*.code-workspace",
      "!LICENSE.md",
      "!package.json",
      "!package-lock.json",
      "!src/",
      "!e2e/",
      
 
"!hooks/",
      "!.angular-cli.json",
      "!_config.yml",
      "!karma.conf.js",
      "!tsconfig.json",
      "!tslint.json",
      "!node_modules/*",
      "node_modules/electron-updater",
      "!window-rdg",
      "!windows-office",
      "!mac-rdg",
      "!mac-office",
      "!app-builds",
      
 
"!apps"
  ],
  "win": {
    "icon": "dist/favicon.png",
    "target": [
      "portable"
    ],
    "publish": [
      {
        "provider":"generic",
        "url":"http://10.1.226.79:8889/download/win/"
      }
    ]
  },
  "mac": {
    "icon": "dist",
    "target": [
      "dmg"
    ],
    "publish": [
      {
        "provider":"generic",
        "url":"http://10.1.226.79:8889/download/mac/"
      }
    ]
  },
  "linux": {
    "icon": "dist",
    "target": [
      "AppImage"
    ]
  }
}

在配置打包的時候，electron-builder會預設把Chromium的核心都打包進去，還有原始碼。我們在開發應用程式的時候會通過webpack將原始碼進行打包和壓縮，生成dist目錄檔案。打包後的檔案是非常小的。大多數時候我們打包出來的應用程式會比較大達到200M到300M那麼這個時候就需要對應用程式進行減小體積。

那麼為什麼應用程式會那麼大呢，我們怎麼找到原因。首先我們通過electron-builder命令進行應用程式打包，在應用程式目錄下會有win-unpacked/resources/app.asar檔案，該檔案就是我們應用程式的原始碼壓縮檔案。我們通過npm install asar -g下載該外掛，然後asar extract app.asar ./將app.asar原始碼解壓，就可以看到我們的應用程式具體包含了哪些資料夾。

找到根源後我們就比較好處理。首先在應用啟動的時候我們的配置如下：

win.loadURL(url.format({
    pathname: path.join(__dirname, 'dist/index.html'),
    protocol: 'file:',
    slashes: true,
 }));

　通過上面的程式碼我們看到我們只需要dist目錄的檔案，就像web端開發一樣他是整個應用程式的程式碼，node_modules資料夾中的大部分庫我們是不需要的。為什麼說大多數的呢，因為我們有可能在程式執行時依賴一些js庫，這些庫還是要打包進應用程式的中，electron-builder打包應用程式已經幫你都配置好，你只要將需要打包的庫放在package.json中的dependencies引數中，開發過node專案的同學都應該知道dependencies下放置的是生產環境程式執行時需要的js庫，devDependencies引數中放置的是開發環境需要的庫，所以我們將執行時的庫放到dependencies，其他的全部放在devDependencies中，這樣就可以大大縮小應用程式的體積，其餘的零散的不需要的檔案通過上面electron-builder.json檔案中的files引數配置前面加上!<檔名>就可以將檔案不打包進去。