使用 NW.js 將 Web 應用打包為桌面應用nw-builder

參考文章：https://www.techug.com/post/transfer-web-app.html

平時工作中經常需要開發各種管理后臺，為了提升開發效率，一般會使用 Bootstrap 一類的 CSS 框架，使用 AngularJS 一類的單頁應用框架，讓 Web 開發能夠更好的將精力集中在業務邏輯上。但逃不過另外一個麻煩，那便是跨瀏覽器的兼容問題。所以我一般的粗暴做法是，干脆就不支持 IE 瀏覽器，通過 userAgent 判斷并提示用戶切換到 Chrome 。其實，除了這個辦法之外，還可以考慮將 Web 應用打包為桌面應用。開源社區提供了 NW.js 來輕松的將 Web 應用打包為桌面應用，這樣只需要做到兼容 Chrome 就夠了。

NW.js 簡介

? NW.js 由 node-webkit 改名而來。目的是想利用 JavaScript 來進行桌面應用開發。與操作系統交互的部分，利用 Node.js 來完成，而與用戶交互的部分，則是使用的網頁開發技術。國內比較有名的案例有釘釘的桌面版，有名的 Chrome 插件 Fawave 也還利用 NW.js 推出了桌面應用。

與 NW.js 類似的解決方案，還有 Github 為了開發 Atom 而推出的 Electron.js
。Slack 的桌面版就是基于它開發的。

環境搭建

需要安裝以下幾個：

Node.js Download
NW.js Download

創建配置文件

配置文件就是 Node.js 中常見的 package.json
，最簡單的示例如下：

{"name": "blog","main": "http://chensd.com/","version": "0.0.1","window": {"width": 1024,"height": 768,"frame": true,"toolbar": false,"icon": 'assets/icon.png'} }

幾個參數解釋如下：

main：程序的入口，這里就是一個網址
window.height/ window.width：應用啟動時的窗口大小
window.frame：是否顯示桌面應用的標題欄
window.toolbar：是否顯示瀏覽器中的前進后退和地址欄
window.icon：這個就是圖標了
在程序目錄中執行如下的命令，可以查看效果：請輸入nw .

程序打包

打包可以使用一個 Node.js 模塊 nw-builder
，先在程序目錄中進行安裝：

npm i --save-dev nw-builder
然后再創建一個 js 文件來存放打包配置：內容如下

var NwBuilder = require('nw-builder');var nw = new NwBuilder({files: './package.json', // 包含文件platforms: ['win64'], // 打包的平臺version: '0.12.3' // 使用 NW.js 的版本 });nw.on('log', console.log); // 日志打印函數 // 開始構建 nw.build().then(function(){console.log('done!'); }).catch(function(err){console.log(err); });

將文件存為 builder.js，然后使用 Node.js 來執行它：

運行：node builder.js
**第一種選擇：**第一次執行時，會從 nwjs.io 上下載編譯好的 chromium 文件，會花點時間（因為需要聯網下載對應的nw的包）你可以慢慢等。

**第二種選擇：**如果你不想等，如果 你想節省時間，可以事先下載好nw的包(可以去這里下載https://dl.nwjs.io/)

下載好后，放在當前目錄的cache\0.37.0-sdk\win32目錄下（.\cache\0.37.0-sdk\win32）注意，將下載包解壓，然后將里面的文件復制到win32目錄下，不要搞錯哈。cache\0.37.0-sdk\win32這三個文件夾要新建，自己建

然后在上文中的builder.js中修改這部分內容：假如你指定的是0.37.0版本的，同時是sdk版本的nw包

此處看不懂可以評論哈，也可加我微信：yizheng369

var nw = new NwBuilder({"main": "index.html",files: ['index.html','./package.json'], // 包含文件platforms: ['win32'], // 打包的平臺version: '0.37.0', // 使用 NW.js 的版本flavor: 'sdk'// 使用 NW.js 的sdk版本 });

編譯完成后，會在目錄中生成 build
文件夾，其中有個按 package.json
中 name
字段命名的目錄，這里是 blog
，包含有使用平臺命名的目錄，這里是 win64
，這便是編譯結果，文件列表如下：

λ ls -al build\eschool_desktop\win64
total 49332
drwxr-xr-x 1 Sid Administ 4096 Apr 6 06:54 ./
drwxr-xr-x 5 Sid Administ 0 Apr 6 06:54 …/
-rwxr-xr-x 1 Sid Administ 4173928 Apr 6 06:54 d3dcompiler_47.dll*
-rwxr-xr-x 1 Sid Administ 61057838 Apr 6 06:54 blog.exe*
-rwxr-xr-x 1 Sid Administ 987648 Apr 6 06:54 ffmpegsumo.dll*
-rw-r–r-- 1 Sid Administ 10457856 Apr 6 06:54 icudtl.dat
-rwxr-xr-x 1 Sid Administ 86016 Apr 6 06:54 libEGL.dll*
-rwxr-xr-x 1 Sid Administ 1890304 Apr 6 06:54 libGLESv2.dll*
drwxr-xr-x 1 Sid Administ 8192 Apr 6 06:54 locales/
-rw-r–r-- 1 Sid Administ 7482865 Apr 6 06:54 nw.pak
-rwxr-xr-x 1 Sid Administ 14879232 Apr 6 06:54 pdf.dll*
這其中，除了可執行文件和 nw.pak
和 icudt.dll
是必須的外，其它都是可以刪除的，具體可以參見 How to package and distribute your apps
文章中的 ‘’’Window’’’ 部分的解釋。

制作安裝包
最后就是做個安裝程序來搞定程序文件存儲到 Program Files 目錄圖標放到開始菜單任務欄桌面之類的臟活累活了。自己寫安裝程序？那可不是 Web 程序員干的事情，當然還是找專業的人來幫忙。比如 Inno Setup
，當然還有一大票 類似的工具
。

打包為 Mac OS X / Linux 應用
只需要在 builder.js
中實例化 nw-builder 時多為 platform
數組添加幾個值即可，支持的完成列表為：

[‘win32’, ‘win64’, ‘osx32’, ‘osx64’, ‘linux32’, ‘linux64’]
這樣做沒毛病嗎？
怎么樣，看起來不錯吧？幾分鐘二十幾行代碼就制作了一個桌面應用，而且看起來還人模狗樣的。不過你很快會發現，它沒有緩存，localStorage 也不持久，每次打開就像第一次打開一樣……下次我們來看看如何解決這些問題。

總結

以上是生活随笔為你收集整理的使用 NW.js 将 Web 应用打包为桌面应用nw-builder的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。