用node-webkit把web應用打包成桌面應用

node-webkit是一個Chromium和node.js上的結合體，經過它咱們能夠把創建在chrome瀏覽器和node.js上的web應用打包成桌面應用，並且還能夠跨平臺的哦。很顯然比起傳統的桌面應用，在某些特定領域用html5+css3+js開發的web應用更加簡單和高效，並且還能夠使用node.js的功能，因此node-webkit仍是頗有用處的。

下面我經過一個簡單的demo來介紹怎麼樣把一個web應用打包成一個可執行文件（這裏只介紹windows環境）

首先新建一個index.html文件，做爲咱們這個demo的入口頁面，咱們暫且就把這個頁面當成一個完整的web應用吧。內容隨便寫點什麼，好比：

而後建立配置文件 package.json,內容以下：

其中的main屬性就是用來指定入口文件的，這個屬性的值能夠是本地文件，也能夠是遠程網址，這樣就至關於能夠把一個遠程的web應用直接變爲一個桌面應用了。

除了name與main這兩個屬性外，還有不少其餘有用的屬性能夠配置，好比指定應用的圖標，顯不顯示瀏覽器的工具欄，指定瀏覽器的初始大小等等，具體的配置參數文檔可看這裏https://github.com/rogerwang/node-webkit/wiki/Manifest-format

 

如今咱們有了兩個文件了。

 

而後將index.html和package.json這兩個文件壓縮到一個zip壓縮包裏，命名爲app.zip

 

如今app.zip這個壓縮包裏的內容應該是這樣的：

 

而後把app.zip這個文件的擴展名改成nw,變爲 app.nw

 

而後下載一個windows版本的node-webkit,解壓後獲得一個文件夾：

 

以後咱們以前獲得的app.nw這個文件就能夠用nw.exe來執行了，直接把app.nw拖到nw.exe上就能夠了。運行結果以下：

跟在chrome中打開index.html這個頁面的效果差很少，固然你能夠經過配置package.json這個文件，來隱藏瀏覽器的工具欄或邊框，來使它更像是一個桌面軟件。

 

由於nw文件的運行須要node-webkit環境的支持，因此咱們還須要把app.nw這個文件跟node-webkit的環境文件一塊兒打包成一個可執行文件。

首先打開windows的cmd,而後輸入以下命令：

copy /b nw.exe+app.nw app.exe

注意文件路徑要根據你的實際狀況進行變更，這裏假設app.nw放在了node-webkit的主文件夾裏，而後輸出的app.exe也會在這個文件夾裏。

執行命令後咱們獲得了 app.exe 這個可執行文件。

 

到了這步，咱們已經獲得了app.exe這個文件，但若是隻有app.exe這個文件仍是不夠的，這個可執行文件的運行還須要幾個dll文件的支持。

其中 nw.pak 與 icudt.dll 這個兩個文件是必需要的。

ffmpegsumo.dll 文件是媒體支持文件，若是你的html頁面中用到了<video>或<audio>或其它與媒體相關的東西，則必須帶上這個文件。

libEGL.dll 和 libGLESv2.dll 這個兩個文件則是使用webGL或GPU必需要的

 

最後咱們獲得的就是這樣一個文件夾：

執行app.exe就能夠運行咱們的demo了。

 

但咱們大多數人想的是給用戶一個exe文件，用戶就能夠使用了，不用再附帶一些其餘文件。

嗯，因此咱們還能夠把app.exe跟其餘的文件再打包一次，把上圖中的全部文件變成一個可執行文件，用戶只要獲得這個文件，就能運行咱們的應用了。

作這步咱們須要一個軟件叫Enigma Virtual Box，首先下載和安裝這個軟件，而後打開它。

而後在Enter Input File Name那裏輸入咱們的app.exe的路徑，在Enter Output File Name那裏填寫咱們要把打包出來的可執行文件輸出到哪裏。最後是把除app.exe外的其它文件拖入到Files那裏，遇到提示的話默認就能夠了。

 

最後點擊右下角的Process按鈕，就大功告成了。

 

最後咱們獲得了一個 app_boxed.exe 的文件，只要把這個文件交給用戶，用戶就能夠運行了。

node-webkit雖然方便，但有個很大的缺點是獲得的可執行文件有點大，你們在能夠在衡量利弊後決定使不使用。