在不少緣由下,咱們爲了迎合客戶或者其餘的緣由,須要在自己代碼或框架不能兼容的瀏覽器下運行項目,怎麼辦呢,咱們將其打包爲桌面應用不失爲一種好idea。nw.js是node-webkit.js的簡稱。至關於一個自定義的webkit內核瀏覽器(chrome)中執行服務端代碼,所以,咱們的項目只須要兼容chrome就ok了。第一次打包的時候,在網上找了好多教程,但是怎麼都打不出來,通過本身的探究後,也但願你們能夠少才點坑吧。html
首先咱們須要如下幾個軟件,若是沒有,點擊其對應超連接進入下載node
1.nw.js nw.js 也能夠進行npm安裝 '''npm install nw -g'''
2.Enigma Virtual Box Enigma Virtual Boxweb
一切需在你的項目打包結束後進行,例子中的項目打包結束後,會在dist文件夾中。按照下面的規則創建文件chrome
nwjs----package.json | ---src | ---package.json
本例子的文件夾名爲nwjs,在nwjs下新建src文件與package.json文件,而後,在src文件中新建package.json文件,並將打包好的文件所有copy進src中
外層的package代碼以下npm
{ "name": "vein_web", "version": "1.0.0", "devDependencies":{ "nw":"^0.18.2", "nw-builder":"^3.1.2" }, "scripts":{ "dev":"nw src/", "prod":"nwbuild --platforms win32 --buildDir dist/ src/" ======根據你的須要,個人例子只輸出win32 } }
src中的package.json代碼以下json
{ "name":"nwjs", "version": "1.0.0", "main":"index.html", "window":{ "min_width":400, "min_height":400 } }
在根目錄下(個人爲nwjs文件)執行yarn install,而後你就靜靜的wait。瀏覽器
在這裏使用npm與yarn沒有差異,只不過我忽然發現我如今喜歡用yarn並且能稍微快一點點,若是你習慣npm也無妨
接着在根目錄下執行yarn run prod框架
,雙擊打卡,若是你的項目啓動了,你就成功一半了,固然,此時,若是你將此文件脫離文件夾是不會運行的,會alert下面的對話框,好,咱們繼續。
![
](http://upload-images.jianshu....
##3.打包封裝文件
1.打開軟件後點擊第一個Brower選擇nwjs構建好的exe結尾的文件
2.點擊左下角的Add按鈕==》點擊Add Files,選擇除了exe結尾的所有文件
3.點擊Add按鈕==》點擊New Folders,新建一個locales文件夾
4.右擊新建的licales文件==》Add Files,添加locales中的全部文件
5.點擊Files Option==》Compress Files
6.點擊右下方的Process按鈕,運行完畢後會生產boxed文件
OK,剛纔生產好的boxed文件就是咱們辛苦半天的結晶,你可將他單獨拉出去脫離原文件夾,也是能夠運行的
不過如今咱們的應用是nwjs的圖標,下面 ,咱們去換應用的圖標
下載Resource Hacker後,打開你的boxed應用==》右擊icon group==》而後選擇你準備好的圖標==》save
這裏須要注意的是圖標應爲icon格式,換完以後,你可能會發現圖標沒有變,你不妨試試將你的應用換一個盤存放或者壓縮後發給你的好友,在他的電腦打開看看。若是圖標有變化,大功告成
個人沒有換圖標,因此依然是nwjs的圖標