下面我通過一個簡單的demo來介紹怎麼樣把一個web應用打包成一個可執行檔案(這裡隻介紹windows環境)
首先建立一個index.html檔案,作為我們這個demo的入口頁面,我們暫且就把這個頁面當成一個完整的web應用吧。内容随便寫點什麼,比如:

然後建立配置檔案 package.json,内容如下:
其中的main屬性就是用來指定入口檔案的,這個屬性的值可以是本地檔案,也可以是遠端網址,這樣就相當于可以把一個遠端的web應用直接變為一個桌面應用了。
現在我們有了兩個檔案了。
然後将<code>index.html</code>和<code>package.json</code>這兩個檔案壓縮到一個zip壓縮包裡,命名為<code>app.zip</code>
現在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,然後輸入如下指令:
注意檔案路徑要根據你的實際情況進行變動,這裡假設<code>app.nw</code>放在了<code>node-webkit</code>的主檔案夾裡,然後輸出的``也會在這個檔案夾裡。
執行指令後我們得到了<code>app.exe</code>這個可執行檔案。
到了這步,我們已經得到了app.exe這個檔案,但如果隻有app.exe這個檔案還是不夠的,這個可執行檔案的運作還需要幾個dll檔案的支援。
其中 nw.pak 與 icudt.dll 這個兩個檔案是必須要的。
ffmpegsumo.dll 檔案是媒體支援檔案,如果你的html頁面中用到了
<video></video>
libegl.dll 和 libglesv2.dll 這個兩個檔案則是使用webgl或gpu必須要的
最後我們得到的就是這樣一個檔案夾:
執行app.exe就可以運作我們的demo了。
但我們大多數人想的是給使用者一個exe檔案,使用者就可以使用了,不用再附帶一些其他檔案。
嗯,是以我們還可以把app.exe跟其他的檔案再打包一次,把上圖中的所有檔案變成一個可執行檔案,使用者隻要得到這個檔案,就能運作我們的應用了。
然後在enter input file name那裡輸入我們的app.exe的路徑,在enter output file name那裡填寫我們要把打包出來的可執行檔案輸出到哪裡。最後是把除app.exe外的其它檔案拖入到files那裡,遇到提示的話預設就可以了。
最後點選右下角的process按鈕,就大功告成了。
最後我們得到了一個 <code>app_boxed.exe</code> 的檔案,隻要把這個檔案交給使用者,使用者就可以運作了。
<code>node-webkit</code>雖然友善,但有個很大的缺點是得到的可執行檔案有點大,大家在可以在衡量利弊後決定使不使用。