用node-webkit把web應(yīng)用打包成桌面應(yīng)用(windows環(huán)境)
node-webkit是一個(gè)Chromium和node.js上的結(jié)合體,通過它我們可以把建立在chrome瀏覽器和node.js上的web應(yīng)用打包成桌面應(yīng)用,而且還可以跨平臺(tái)的哦。很顯然比起傳統(tǒng)的桌面應(yīng)用,在某些特定領(lǐng)域用html5+css3+js開發(fā)的web應(yīng)用更加簡單和高效,而且還可以使用node.js的功能,所以node-webkit還是很有用處的。
下面我通過一個(gè)簡單的demo來介紹怎么樣把一個(gè)web應(yīng)用打包成一個(gè)可執(zhí)行文件(這里只介紹windows環(huán)境)
首先新建一個(gè)index.html文件,作為我們這個(gè)demo的入口頁面,我們暫且就把這個(gè)頁面當(dāng)成一個(gè)完整的web應(yīng)用吧。內(nèi)容隨便寫點(diǎn)什么,比如:
然后創(chuàng)建配置文件 package.json,內(nèi)容如下:
其中的main屬性就是用來指定入口文件的,這個(gè)屬性的值可以是本地文件,也可以是遠(yuǎn)程網(wǎng)址,這樣就相當(dāng)于可以把一個(gè)遠(yuǎn)程的web應(yīng)用直接變?yōu)橐粋€(gè)桌面應(yīng)用了。
除了name與main這兩個(gè)屬性外,還有很多其他有用的屬性可以配置,比如指定應(yīng)用的圖標(biāo),顯不顯示瀏覽器的工具欄,指定瀏覽器的初始大小等等,具體的配置參數(shù)文檔可看這里https://github.com/rogerwang/node-webkit/wiki/Manifest-format
現(xiàn)在我們有了兩個(gè)文件了。
然后將index.html和package.json這兩個(gè)文件壓縮到一個(gè)zip壓縮包里,命名為app.zip
現(xiàn)在app.zip這個(gè)壓縮包里的內(nèi)容應(yīng)該是這樣的:
然后把a(bǔ)pp.zip這個(gè)文件的擴(kuò)展名改為nw,變?yōu)?app.nw
然后下載一個(gè)windows版本的node-webkit,解壓后得到一個(gè)文件夾:
之后我們之前得到的app.nw這個(gè)文件就可以用nw.exe來執(zhí)行了,直接把a(bǔ)pp.nw拖到nw.exe上就可以了。運(yùn)行結(jié)果如下:
跟在chrome中打開index.html這個(gè)頁面的效果差不多,當(dāng)然你可以通過配置package.json這個(gè)文件,來隱藏瀏覽器的工具欄或邊框,來使它更像是一個(gè)桌面軟件。
因?yàn)閚w文件的運(yùn)行需要node-webkit環(huán)境的支持,所以我們還需要把a(bǔ)pp.nw這個(gè)文件跟node-webkit的環(huán)境文件一起打包成一個(gè)可執(zhí)行文件。
首先打開windows的cmd,然后輸入如下命令:
copy /b nw.exe+app.nw app.exe
注意文件路徑要根據(jù)你的實(shí)際情況進(jìn)行變動(dòng),這里假設(shè)app.nw放在了node-webkit的主文件夾里,然后輸出的app.exe也會(huì)在這個(gè)文件夾里。
執(zhí)行命令后我們得到了 app.exe 這個(gè)可執(zhí)行文件。
到了這步,我們已經(jīng)得到了app.exe這個(gè)文件,但如果只有app.exe這個(gè)文件還是不夠的,這個(gè)可執(zhí)行文件的運(yùn)行還需要幾個(gè)dll文件的支持。
其中 nw.pak 與 icudt.dll 這個(gè)兩個(gè)文件是必須要的。
ffmpegsumo.dll 文件是媒體支持文件,如果你的html頁面中用到了<video>或<audio>或其它與媒體相關(guān)的東西,則必須帶上這個(gè)文件。
libEGL.dll 和 libGLESv2.dll 這個(gè)兩個(gè)文件則是使用webGL或GPU必須要的
最后我們得到的就是這樣一個(gè)文件夾:
執(zhí)行app.exe就可以運(yùn)行我們的demo了。
但我們大多數(shù)人想的是給用戶一個(gè)exe文件,用戶就可以使用了,不用再附帶一些其他文件。
嗯,所以我們還可以把a(bǔ)pp.exe跟其他的文件再打包一次,把上圖中的所有文件變成一個(gè)可執(zhí)行文件,用戶只要得到這個(gè)文件,就能運(yùn)行我們的應(yīng)用了。
做這步我們需要一個(gè)軟件叫Enigma Virtual Box,首先下載和安裝這個(gè)軟件,然后打開它。
然后在Enter Input File Name那里輸入我們的app.exe的路徑,在Enter Output File Name那里填寫我們要把打包出來的可執(zhí)行文件輸出到哪里。最后是把除app.exe外的其它文件拖入到Files那里,遇到提示的話默認(rèn)就可以了。
最后點(diǎn)擊右下角的Process按鈕,就大功告成了。
最后我們得到了一個(gè) app_boxed.exe 的文件,只要把這個(gè)文件交給用戶,用戶就可以運(yùn)行了。
node-webkit雖然方便,但有個(gè)很大的缺點(diǎn)是得到的可執(zhí)行文件有點(diǎn)大,大家在可以在衡量利弊后決定使不使用。
- webpack打包、編譯、熱更新Node內(nèi)存不足問題解決
- autojs的nodejs打包成品app經(jīng)驗(yàn)分享
- express搭建的nodejs項(xiàng)目使用webpack進(jìn)行壓縮打包
- Node.js打包管理工具NPM用法
- NodeJs使用webpack打包項(xiàng)目的方法詳解
- docker打包node項(xiàng)目的過程講解
- node app 打包工具pkg的具體使用
- 使用pkg打包Node.js應(yīng)用的方法步驟
- webpack打包node.js后端項(xiàng)目的方法
- 基于node打包可執(zhí)行文件工具_(dá)Pkg使用心得分享
- nodejs文件實(shí)現(xiàn)打包成exe, 并設(shè)置開機(jī)自啟動(dòng)的方法詳解(沒有黑窗口)
相關(guān)文章
詳解如何實(shí)現(xiàn)一個(gè)簡單的Node.js腳手架
本篇文章主要介紹了如何實(shí)現(xiàn)一個(gè)簡單的Node.js腳手架,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-12-12
前端自動(dòng)化開發(fā)之Node.js的環(huán)境搭建教程
這篇文章主要介紹了前端自動(dòng)化開發(fā)之Node.js環(huán)境搭建的相關(guān)資料,文中介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用node.js具有一定的參考價(jià)值,需要的朋友們下面來一起看看吧。2017-04-04
5分鐘教你用nodeJS手寫一個(gè)mock數(shù)據(jù)服務(wù)器的方法
這篇文章主要介紹了5分鐘教你用nodeJS手寫一個(gè)mock數(shù)據(jù)服務(wù)器的方法,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
Node.js?使用?zlib?內(nèi)置模塊進(jìn)行?gzip?壓縮
這篇文章主要介紹了Node.js?使用?zlib?內(nèi)置模塊進(jìn)行?gzip?壓縮,nodejs為我們提供了一個(gè)zlib內(nèi)置模塊,我們可以使用它其中的gzip方法來對傳遞的數(shù)據(jù)進(jìn)行壓縮,從而提高數(shù)據(jù)傳遞效率,更多相關(guān)內(nèi)容需要的朋友可以參考一下2022-09-09
Node.js處理I/O數(shù)據(jù)之使用Buffer模塊緩沖數(shù)據(jù)
這篇文章介紹了Node.js使用Buffer模塊緩沖數(shù)據(jù)的方法,文中通過示例代碼介紹的非常詳細(xì)。對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2022-07-07
為nuxt項(xiàng)目寫一個(gè)面包屑cli工具實(shí)現(xiàn)自動(dòng)生成頁面與面包屑配置
這篇文章主要介紹了為nuxt項(xiàng)目寫一個(gè)面包屑cli工具實(shí)現(xiàn)自動(dòng)生成頁面與面包屑配置,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
node.js連接mongoDB數(shù)據(jù)庫 快速搭建自己的web服務(wù)
這篇文章主要為大家詳細(xì)介紹了node.js連接mongoDB數(shù)據(jù)庫,如何快速搭建自己的web服務(wù),感興趣的小伙伴們可以參考一下2016-04-04













