【NWJS】解析node-webkit(NWJS)的打包和發布
目錄結構:
contents structure [-]
- 下載和安裝node-webkit
- 建立一個簡單的WEB應用
- 生成EXE可執行文件
- 修改icon
- 封包
- Enigma Virtual Box
- Inno Setup
node-webkit是一個Chromium和node.js上的結合體,通過它我們可以把建立在chrome瀏覽器和node.js上的web應用打包成桌面應用,而且還可以跨平臺的哦。很顯然比起傳統的桌面應用,在某些特定領域用html5+css3+js開發的web應用更加簡單和高效,而且還可以使用node.js的功能,所以node-webkit還是很有用處的。
1.下載和安裝node-webkit
node-webkit的官方網址:https://nwjs.io/
githup的訪問地址:https://github.com/nwjs
node-webkit的中文網址:https://nwjs.org.cn
下載的時候有兩個版本,一個是NORMAL版,另一個是SDK版本。SDK版本支持debug調試,NORMAL不支持。開發的話,應該下載SDK版本,發布的話應該下載NORMAL版本。
2.建立一個簡單的WEB應用
新建立一個app/index.html,作為這個demo的入口文件:
<html> <head> <meta charset="utf-8" /> <title>Demo</title> <head> <body> <h1>Hello World!</h1> </body> <html>
創建一個配置文件package.json:
{ "main": "app/index.html", "name": "nw-demo", "description": "demo app of node-webkit", "version": "0.1.0", "keywords": [ "demo", "node-webkit" ], "window": { "title": "node-webkit demo", "toolbar": true, "frame": true, "width": 800, "height": 500, "position": "center", "min_width": 400, "min_height": 200, "max_width": 800, "max_height": 600 }, "webkit": { "plugin": true } }
其中main屬性用來指定入口文件,這個屬性值可以是本地文件,也可以是遠程網址(相當於把一個遠程的web界面直接變成一個桌面應用了)。其它的屬性,比如:圖標、窗口欄、初始化的大小等等可以參考官方文檔。
3.生成EXE可執行文件
將index.html和package.json這兩個文件壓縮到一個zip壓縮包裏,命名為app.zip
把app.zip這個文件的擴展名改為nw,變為 app.nw
將app.nw放置到nw.exe同一級目錄,進入windows cmd後運行這個命令:
copy /b nw.exe+app.nw app.exe
然後會生成app.exe文件。
我們可以使用如下的幾種方式安裝到客戶的電腦上:
1.直接RAR打包,發給用戶,這也就是個綠色版,無需安裝。
2.我們用軟件工具 Enigma Virtual Box 封包,用這個工具可以把整個應用程序文件夾生成一個單獨的app.exe, 用戶直接雙擊就能運行,這個也是無需安裝的。
3.用軟件工具innosetup,這個工具會生成一個安裝版本。
4.修改icon
默認情況下創建出來的應用程序(exe)會和nw.exe的圖標一樣,可以通過resource hacker這個工具來修改nw.exe的圖標成你所想要的。
打開resource hacker,找到對應的圖片組資源(icon group),然後右擊選擇替換(replace)就可以了。
5.封包
在進行打包前,首先把我們在NWJS_SDK版本(是在NWJS_SDK版本下進行開發的)下的package.json、app.exe、app文件夾復制到NWJS_NORMAL版本中,並且刪除NWJS_NORMAL版本中的nw.exe文件。
5.1 Enigma Virtual Box
官網上推薦用Enigma Virtual Box這個軟件來將app.exe和依賴的dll打包成一個exe後發布
在選擇待封包的主程(Enter Input File Name)輸入app.exe的路徑
在封包程序另存(Enter Output File Name)輸入可執行程序的輸出路徑
拖入文件和文件夾,選擇nwjs_normal的配置文件(除了app.exe的其它文件和文件夾)
點擊封包後,封包結束後會得到app_boxed.exe。然後刪除app_boxed.exe之外的所有文件和文件夾(如果在封裝的時候沒有拖入所有的文件,那麽就不能刪除那些未參與封包的文件),然後就可以得到最後的可執行文件app_boxed.exe
從截圖可以看出,這個app_boxed.exe是免安裝的,可以點擊直接運行。這是Enigma Virtual Box封包的優點,無需安裝直接運行,但缺點就是太大了,從截圖可以看出app_boxed.exe達到了202MB。
5.2 Inno Setup
這是另一種打包方式,就是用Inno Setup來打包成安裝程序,即將一開始的web應用源文件和node-webkit的nw.exe和一些以來dll直接壓縮成一個安裝文件,我們並不需要上述中間那先打包成app.exe的步驟。用戶在使用你的exe後會出現setup wizard把程序安裝到Program Files目錄中,將nw.exe,dll,web應用釋放出來,這個時候所生成的安裝文件其實大小會小很多。
下載安裝運行後點擊File->New即進入創建步驟
填寫應用發布的信息:
添加應用程序的打包文件:
執行後續操作,進行編譯:
生成可執行EXE:
我們可以看出安裝包的大小是54.3MB,Inno Setup的優點就是安裝包小,但缺點就是需要進行安裝。
【NWJS】解析node-webkit(NWJS)的打包和發布