electron打包：electron-packager及electron-builder兩種方式實現（for Windows）
前言
本文主要介紹如何通過electron-packager及electron-builder兩種方式，將已有的electron應用打包成msi格式和exe可執行檔案。打包是一個成熟的應用程式一個重要的環節，希望這篇文章可以給大家一些參考，最後會講到打包時遇到的一些坑，與大家分享。
electron-packager
使用命令 npm install electron-packager --save-dev 安裝好之後會在package.json中的devDependencies生成程式碼:"devDependencies": {
"electron-packager": "^9.1.0"
}- 打包時要分清devDependencies與dependencies的區別，文章後會講。
- package.json 的額外欄位 —— productName、author 和 description，雖然這幾個欄位並不是打包必備的，但它們會在 Windows 的 Squirrel 安裝包（用於自動更新）中使用到，所以請讀者根據實際情況新增。
安裝好模組之後，就可以對應用進行打包，為了方便起見，在
package.json中新增程式碼：{
"scripts": {
"start": "electron .",
"build": "electron-packager . AlarmClock --out AlarmClock --overwrite --platform=win32 --arch=x64 --icon=clock.ico --prune=true --squirrel-install --ignore=node_modules/electron-* --electron-version=1.7.9 --ignore=AlarmClock-win32-x64 --version-string.CompanyName=Robby --version-string.ProductName=AlarmClock",
},
}引數說明：
- electron-packager . AlarmClock：把當前目錄 . 打包起來，並將應用程式命名 AlarmClock
- --out AlarmClock：輸出資料夾於 AlarmClock，產出後預設資料夾為 AlarmClock-win32-x64
- --overwrite：如果已經存在資料夾和檔案，會進行覆寫
- --platform=win32：平台為 Windows（Mac: darwin, Linux: linux）
- --arch=x64：應用程式 64位元（ia32, all）
- --icon=clock.ico：應用程式 ICON
- --ignore=node_modules/electron-*：忽略的檔案
- --electron-version=1.7.9：electron 的核心版本
- --version-string.CompanyName=Robby：軟體公司名稱（顯示於軟體資訊中）
- --version-string.ProductName=AlarmClock：軟體名稱（顯示於軟體資訊中）
然後在命令列中執行npm run build
打包成功後，會在AlarmClock目錄（此處的目錄是在引數中配置的）下生成.exe，執行該檔案，並且沒有報錯，則說明本次打包成功。
特點：
1、支援平臺有：Windows (32/64 bit)、OS X (also known as macOS)、Linux (x86/x86_64);
2、進行應用更新時，使用electron內建的autoUpdate進行更新
3、支援CLI和JS API兩種使用方式；
electron-builder
首先來看看什麼是electron-builder，來自官方的解釋：
A complete solution to package and build a ready for distribution Electron, Proton Native or Muon app for macOS, Windows and Linux with “auto update” support out of the box.
首先，依舊是安裝依賴。
（這裡官方強烈推薦使用yarn安裝依賴包，但我使用了npm安裝的依賴也可以正常打包，所以至於為什麼官方強烈推薦用yarn，我還沒搞懂其原因，還請了解緣由的大佬們賜教）
yarn add electron-builder --save-dev在
package.json中做如下配置
"build": {
"productName":"xxxx",
"appId": "com.xxx.xxxxx",
"copyright":"xxxx",
"directories": {
"output": "build"
},
"win": {
"icon": "xxx/icon.ico"
}
},
"scripts": {
"dist": "electron-builder --win --x64"
}進階配置：
"build": {
"productName":"xxxx",
"appId": "com.leon.xxxxx",
"copyright":"xxxx",
"directories": {
"output": "build"
},
"nsis": {
"oneClick": false,
"allowElevation": true,
"allowToChangeInstallationDirectory": true,
"installerIcon": "./build/icons/aaa.ico",
"uninstallerIcon": "./build/icons/bbb.ico",
"installerHeaderIcon": "./build/icons/aaa.ico",
"createDesktopShortcut": true,
"createStartMenuShortcut": true,
"shortcutName": "xxxx",
"include": "build/script/installer.nsh",
},
"publish": [
{
"provider": "generic",
"url": "http://xxxxx/"
}
],
"files": [
"dist/electron/**/*"
],
"dmg": {
"contents": [
{
"x": 410,
"y": 150,
"type": "link",
"path": "/Applications"
},
{
"x": 130,
"y": 150,
"type": "file"
}
]
},
"mac": {
"icon": "build/icons/icon.icns"
},
"win": {
"icon": "build/icons/aims.ico",
"target": [
{
"target": "nsis",
"arch": [
"x64",
"ia32"
]
}
]
},
"linux": {
"icon": "build/icons"
}
}
留言
張貼留言