NW.js+Enigma Virtual Box+node-webkit打包Hybrid桌面應用其實很簡單

WHY

在不少緣由下，咱們爲了迎合客戶或者其餘的緣由，須要在自己代碼或框架不能兼容的瀏覽器下運行項目，怎麼辦呢，咱們將其打包爲桌面應用不失爲一種好idea。nw.js是node-webkit.js的簡稱。至關於一個自定義的webkit內核瀏覽器（chrome）中執行服務端代碼，所以，咱們的項目只須要兼容chrome就ok了。第一次打包的時候，在網上找了好多教程，但是怎麼都打不出來，通過本身的探究後，也但願你們能夠少才點坑吧。

HOW

首先咱們須要如下幾個軟件，若是沒有，點擊其對應超連接進入下載

1.nw.js nw.js 也能夠進行npm安裝 '''npm install nw -g'''
2.Enigma Virtual Box Enigma Virtual Box

STEP

1.準備工做

一切需在你的項目打包結束後進行，例子中的項目打包結束後，會在dist文件夾中。按照下面的規則創建文件

nwjs----package.json
     |
      ---src
    |
     ---package.json

本例子的文件夾名爲nwjs，在nwjs下新建src文件與package.json文件，而後，在src文件中新建package.json文件，並將打包好的文件所有copy進src中
外層的package代碼以下

{
  "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代碼以下

{
    "name":"nwjs",
    "version": "1.0.0", 
    "main":"index.html",
    "window":{
        "min_width":400,
        "min_height":400
    }
}

2.安裝並進行生產構建

在根目錄下（個人爲nwjs文件）執行yarn install，而後你就靜靜的wait。

在這裏使用npm與yarn沒有差異，只不過我忽然發現我如今喜歡用yarn並且能稍微快一點點，若是你習慣npm也無妨
接着在根目錄下執行yarn run prod

![

](http://upload-images.jianshu....

這個時候 你的文件夾會發生變化，就像這樣

按照這個路徑找到你命名的文件（exe結尾），雙擊打卡，若是你的項目啓動了，你就成功一半了，固然，此時，若是你將此文件脫離文件夾是不會運行的，會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文件

4優化

OK，剛纔生產好的boxed文件就是咱們辛苦半天的結晶，你可將他單獨拉出去脫離原文件夾，也是能夠運行的
不過如今咱們的應用是nwjs的圖標，下面 ，咱們去換應用的圖標

下載Resource Hacker後，打開你的boxed應用==》右擊icon group==》而後選擇你準備好的圖標==》save

這裏須要注意的是圖標應爲icon格式，換完以後，你可能會發現圖標沒有變，你不妨試試將你的應用換一個盤存放或者壓縮後發給你的好友，在他的電腦打開看看。若是圖標有變化，大功告成

個人沒有換圖標，因此依然是nwjs的圖標