前端 Electron Nsis Web 安裝包配置方法

 

 

 

一般來說，一個 Electron 應用的 Windows 安裝包最小也有 30 多 M，如果是 32 位 + 64 位的安裝包，那就會是 60 多 M，而如果打成 web 版的安裝包則非常小，只有幾百 K，它在用戶安裝的時候再根據用戶操作系統的位數去下載相應的安裝包並安裝。

制作 Electron Nsis Web 版的安裝包首先要選擇一個發布源，也就是安裝包存放的地方，有 BintrayOptions, GenericServerOptions, GitHub, S3Options, SpacesOptions 可供選擇，這里我選擇 Github。

 

1. 配置 github

第一步，首先要在 github 上新建一個項目，新建的時候勾上” Initialize this repository with a README” 選項

 

 

 

今后我們的安裝包將會上傳到這個項目的 release 頁面下，因此這個項目不需要寫代碼，我們只是用到這個項目的 release 功能而已。勾上 initialize 是為了 github 自動幫我們初始化項目，否則沒有初始化的項目是不能使用 release 功能的。

第二步，創建 GH_TOKEN。每次發布安裝包的時候當然不可能手動上傳，通過 GH_TOKEN，我們可以用程序調用 github 的 api 來自動上傳文件。

點擊這里 或者 在 github 的個人設置中，找到 developer settings，然后點 Personal access token，來到如下頁面，點擊右上方的 “Generate new toke” 按鈕

 

 

 

接下來給 token 隨便取一個名字，選擇 scope 只勾選 repo 就可以了

 

 

 

最后點擊最底下的 Generate 按鈕，將會得到一個 GH_TOKEN，記得把這個 token 在本地用文件保存下來。

第三步，設置臨時的環境變量

windows 系統

1	set GH_TOKEN=xxxxxxxxxxxxxxx

linux 系統

1	export GH_TOKEN=xxxxxxxxxxxxxxx

 

2. 配置package.json

現在修改 package.json 中的 build 屬性

首先 把原先的 nsis 改為 nsisWeb

然后 把 target 改為 nsis-web

接下來設置 publish 屬性

• provider 填 github
• repo 填剛剛在 github 上新建的項目名，注意不是項目的 url
• owner 就填我的 github 的賬戶名
• releaseType 我選的是 releaseType，有三個選項 “draft” | “prerelease” | “release” 默認是 draft

修改完之后的文件內容如下

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24

{ "build": { "nsisWeb": { "artifactName": "${productName}_Setup_${version}.${ext}", "oneClick": false, "perMachine": false, "allowToChangeInstallationDirectory": true }, "win": { "target": [ { "target": "nsis-web", "arch": ["x64", "ia32"] } ] }, "publish": { "provider": "github", "repo": "electron-app", "owner": "luffySAMA", "releaseType": "release" } } }

好了，現在運行 npm run release 就會在 github 項目的 release 里面看到

 

 

 

其中 electron-app_Setup_1.0.0.exe 就是 web 版的安裝包，而另外兩個 .7z的是實際的安裝包，我們只要讓用戶下載 web 版的安裝包就可以了。

---

附源碼

web 版：https://github.com/luffySAMA/electron-app

普通版：https://github.com/szwacz/electron-boilerplate