使用 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 容器中打开应用并进行检查，完成以后再自动关闭应用。