使用 nw-builder 構建跨平臺桌面應用程序

NW.js 是一個使用 Web 技術建立本地應用的框架，如 HTML、JavaScript 和 CSS。簡單地說，當你在使用普通的流程開發一個 Web 應用時，開發完成後，運行一個生成器，將全部東西編譯成一個本地應用，它會像一個瀏覽器同樣運行你的 Web 應用。這種應用就被稱爲「Hybrid 應用（一種混合本地編程和 Web 編程技術的應用）」。javascript

Hybrid 應用的偉大之處，不只在於它可使用你熟悉的語言（HTML、JavaScript 和 CSS）來開發，還由於它比普通的 Web 應用更有優越性：css

控制瀏覽器和瀏覽器版本（你知道你的應用是調用的什麼瀏覽器）。NW.js hybrid 應用使用 Chromium 來顯示— 這是一種開源瀏覽器，也是 Google Chrome（谷歌瀏覽器）的核心。所以，能在 Chrome 中運行的應用也能在 NW.js 中運行。html
控制視窗。例如，你能夠定義一個固定大小，或者最小化/最大化的視窗。java
對本地文件的訪問不會受同源策略的約束。若是你想在瀏覽器經過 XMLHttpRequest 打開一個不在相同目錄的本地文件，請求會阻止。而 NW.js 應用中關閉了這樣的行爲。node

它們也提供了 API，帶來以下優勢：linux

整合 Node.jswebpack
訪問剪貼板git
訪問文件系統github
訪問硬件（好比獲取打印機列表）web
托盤圖標
自定義文件選擇對話框
整合 shell（在默認的資源管理器或瀏覽器中打開文件或 URL）
自定義主窗口的選項（關閉按鈕、菜單欄）和上下文菜單
設置和獲取綻開等級。

看起來不錯？那讓咱們開始吧。在這篇文章中，咱們會經過練習熟悉 NW.js，並學習如何建立一個 Hybrid 應用。用於這篇文章的示例應用已經在 GitHub 上準備好了。

NW.js 與 Electron 相比之下的優點

首先要說的是，NW.js 並非惟一的 Bybrid 應用框架。另外一個這樣的框架叫 Electron。它誕生於 2013年，比 NW.js 晚兩年，不過由於它來自於 GitHub，很快就被你們所認識。如今你可能對它們之間的區別感興趣。這裏列舉了與 Electron 相比，NW.js 的優點：

支持 chrome.* API。這些 API 可用於與瀏覽器交互。（你能夠在 NW.js 文檔中找到更多相關的信息)
支持 Chrome 應用。Chrome應用是使用 Web 語句編寫並打包的應用。（更多信息請參閱 Chrome 開發者文檔。）這些應用與 NW.js 不一樣，由於它們沒有整合 Node.js，並且經過 Chrome Web Store 發佈。（Chrominum 會在2018年8月取消對它的支持（參閱他們的博客）。不過由於這篇文章所說的緣由，NW.js 仍然會支持 Chrome 應用。）
支持 NaCl (Native Client，本地客戶端) 和 PNaCl (可移植的本地客戶端) 應用。它們致力於性能，所以使用 C 和 C++ 編寫。（參閱這篇教程瞭解如何在 NW.js 中使用它們。）
擁有 V8 的映像源碼保護，保護你的應用程序源碼。使用 nwjc 工具能夠將你的代碼編譯爲本地代碼。（更多信息參考這篇文章。）
擁有一個內建的 PDF 閱讀器。
容許打印預覽。
支持 Node.js 整合 Web Workers。這用於編寫多線程應用。

不過，Electron 也有值得一提的優勢：

內建自動更新（你能夠在這個事項裏找到關於 NW.js 的自動更新）。
自動向遠程服務器報告程序崩潰。NW.js 只會把錯誤信息寫入一個本地文件，須要手工提交。

還有一個重要的區別。NW.js 應用的入口是一個 HTML 文件中的 Form。這個 HTML 文件會直接在 GUI 中打開。

另外一方面，Electron 應用使用一個 JavaScript 文件做爲入口。這個 JavaScript 文件由另外一個主進程打開，而後由它在 GUI 中打開 HTML。這樣的話，理論上你能夠不經過 GUI 運行 Electron 應用。一樣的道理，關閉 GUI 不會關閉主進程；你須要調用一個 API 來終止主進程。

雖然 Electron 不使用 GUI 來啓動 JavaScript 寫的桌面應用，但 NW.js 應用卻更容易創建示基於顯示 HTML 的應用。

注意: 若是你確實關心 Electron 的優點，看看 SitePoint 最新的文章使用 Electon建立桌面應用。

建立一個演示應用

來，開始建立咱們的應用，稍後咱們會把它編譯成本地應用。由於建立 Web 應用的方式多種多樣——使用不一樣的 JS 語言（TypeScript、CoffeScript 等），模塊加載器（RequireJS、webpack、SystemJS 等），框架（AngularJS、React、Vuew.js 等）和（樣式表）預處理器（SCSS、LESS、Haml 等）——每一個人都有本身的偏好，咱們只使用基本的技術，HTML、CSS 和 JS（ES6 標準）。

NW.js 沒有樣板 (初始項目) 來完成初始的設置。它們都經過特定的框架、模塊加載器或預處理器來建立。然而，咱們從頭開始實現一個簡單的 NW.js 應用程序。它會比較易懂，以後你能夠很容易按本身的需求定製，或者把它變成樣板。

項目結構

首先，咱們須要建立項的目錄結構和文件：

nw.js-example/
├── src/
│   ├── app/
│   │  └── main.js
│   ├── assets/
│   │  └── icon.png
│   ├── styles/
│   │  └── common.css
│   ├── views/
│   │  └── main.html
│   └── package.json
└── package.json

說明：

src/ 應用程序源文件。
src/app/ JavaScript 文件。
src/assets/ 圖片，在咱們的例子中只有 icon.png 文件，它將做爲一個窗口圖標來顯示。
src/styles/ 一般包含 SCSS 或 LESS 文件，在咱們的例子中，僅僅是一個簡單的 CSS 文件。
src/views/ 包含 HTML 視圖文件。
src/package.json NW.js 應用程序清單文件（參考清單文件格式），咱們也能夠在這個文件中爲應用程序指定特殊的依賴項。
package.json 是一個 npm 包文件，咱們用它來構建工做流，也能夠指定特殊的依賴，這在實際的 NW.js 應用程序中不是必須的，例如根據依賴構建。

建立清單文件

如今，咱們已經建立了項目結構和文件，能夠從 NW.js 的清單文件 src/package.json 開始了。根據文檔，這個文件基本上僅須要兩個屬性：name，一個應用程序名稱，和 main，一個做爲入口的 HTML 文件的路徑。可是咱們須要添加更多信息，如窗口的圖標的路徑，以及最小寬度和高度，以確保用戶不會看到任何奇怪的事情：

{
  "name":"nw.js-example",   "main":"views/main.html",   "window":{     "min_width":400,     "min_height":400,     "icon":"assets/icon.png"   } }

就是這樣！應用程序在開始運行後，將打開 src/views/main.html，main 的路徑是以清單文件（manifest file）爲參考的相對路徑。

建立主視圖

在這個時候咱們能夠編寫一個待辦事項程序。可是咱們要專一於 NW.js 和它自己的功能。所以，我更傾向讓你本身來決定咱們的應用程序的功能。我在 GitHub 上建立了一個示例項目 NW.js-示例來演示幾個 NW.js功能，例如，Node.js 集成和剪貼板訪問。您隨時能夠在應用程序中用它來測試和研究。固然你也可使用其餘的功能。

無論你做何決定，你都必需要建立 thesrc/views/main.html 文件。由於它是咱們應用程序的入口點。文件內容以下：

<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <title>NW.js-example | main</title>
    <link rel="stylesheet" href="../styles/common.css">
</head>
<body>
    <h1>Hello World :-)</h1>
    <script src="../app/main.js"></script>
</body>
</html>

在真正的應用程序中，你可能有個多個其餘的視圖文件並用 Ajax 加載它們。

爲了簡單起見，您還能夠建立本地超連接並引用其餘 HTML 文件。例如：

<a href="something.html">Something</a>

而後，在 src / views / 中建立 something.html 文件。

安裝 NW.js

如今咱們建立了 NW.js 項目，包括清單和主視圖。最終咱們須要一個方法直接在開發中運行 NW.js，並經過構建過程生成可運行於多個系統的本地應用。

爲達此目的，咱們須要兩個包：

nw (開發)
nw-builder (生產)

既然它們與咱們的應用功能無關（使用它們只是爲了開發和生產目的），咱們在第二個，即放在根目錄下的 package.json 中建立 devDependencies 配置，加入它們。這個配置與必須的 name 和 version 字段並列：

{
  "name":"nw.js-example",   "version":"1.0.0",   "devDependencies":{     "nw":"^0.18.2",     "nw-builder":"^3.1.2"   } }

如今只須要在項目的根目錄下運行下面的命令來安裝 devDependencies：

$ npm install

搞定！能夠構建了。

打包和發佈

咱們在 package.json 中加入 npm 腳原本讓打包變得簡單。npm 腳本在右邊定義要運行的 CLI 命令，在左邊定義它的快捷方式，而後容許咱們經過 npm run 來運行指定的快捷方式。如今添加兩個腳本，一個用於開發，一個用於生產：

{
  "name":"nw.js-example",   "version":"1.0.0",   "devDependencies":{     "nw":"^0.18.2",     "nw-builder":"^3.1.2"   },   "scripts":{     "dev":"nw src/",     "prod":"nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ src/"   } }

直接運行 NW.js

直接運行 NW.js 應用，只須要這個命令：

$ npm run dev

這個快捷方式會調用咱們定義在 script 下 dev 對應的命令以使用 nw 包。開發機器上直接打開一個新窗口，顯示着 src/views/main.html。

生產構建

要進行生產構建須要使用 nw-builder，它支持針對 Windows、Linux 和 macOS 進行輸出。在咱們的例子中，咱們會針對全部這些平臺打包，而且包含32位和64位版本。對於 macOS 來講，目前只能在之前的模式下構建 32位的版本。（參閱 GitHub 上的這個 issue。）因此，咱們只構建64位版本。

運行以下命令進行生產構建：

$ npm run prod

和直接運行 NW.js 同樣，它也使用咱們定義在 scripts 中的 CLI 命令。

而後得等一下子 …

完成以後，看看你的 dist/ 目錄，就像這樣：

dist/
└── nw.js-example/
    ├── linux32/
    ├── linux64/
    ├── osx64/
    ├── win32/
    └── win64/

很是好，咱們差很少完成了！

測試和調試

手工測試

既然 NW.js 是基於 Chrominum 的，那麼它的手工測試和 Chrome 同樣簡單。若是你遇到一個BUG——可視效果或者功能性的——你均可以經過快捷鍵F12或者下面的程序打開開發者工具：

nw.Window.get().showDevTools();

注意這須要SDK build flavor[譯者注：flavor 能夠理解爲插件或者功能擴展]。若是你想在生產構建的時候去掉開發者工具，你可使用另外一個flavor或者直接阻止F12事件。

自動化測試

自動化的單元測試（幸虧有你）普遍用於確保不一樣的實現能正確工做，這避免了老是進行手工測試。

若是你的應用不使用 NW.js API 提供的特有方法，理論上來講你能夠停留在通常的Web應用工做流上——例如，把Karma做爲一個運行器與做爲框架的Jasmine聯合使用。

可是若是你使用 NW.js API 特有的方法，你須要在 NW.js 應用中運行測試，這才能確保使用到的 API 方法存在。一種方法是使用 NW.js 的 Karma 啓動器插件，好比 karma-nodewebkit-launcher。它和其它瀏覽器的 Karma 啓動器插件同樣：在 NW.js 容器中打開應用並進行檢查，完成以後再自動關閉應用。