【NWJS】解析node-webkit(NWJS)的打包和发布

时间 2019-11-06

标签 NWJS 解析 node webkit nwjs 打包发布繁體版

原文原文链接

目录结构：css

contents structure [-]

node-webkit是一个Chromium和node.js上的结合体，经过它咱们能够把创建在chrome浏览器和node.js上的web应用打包成桌面应用，并且还能够跨平台的哦。很显然比起传统的桌面应用，在某些特定领域用html5+css3+js开发的web应用更加简单和高效，并且还可使用node.js的功能，因此node-webkit仍是颇有用处的。html

1.下载和安装node-webkit

node-webkit的官方网址：https://nwjs.io/
githup的访问地址：https://github.com/nwjs
node-webkit的中文网址：https://nwjs.org.cn

下载的时候有两个版本，一个是NORMAL版，另外一个是SDK版本。SDK版本支持debug调试，NORMAL不支持。开发的话，应该下载SDK版本，发布的话应该下载NORMAL版本。html5

2.创建一个简单的WEB应用

新创建一个app/index.html,做为这个demo的入口文件：node

<html>
<head>
    <meta charset="utf-8" />
    <title>Demo</title>
<head>
<body>
    <h1>Hello World!</h1>
</body>
<html>

建立一个配置文件package.json：css3

{
  "main": "app/index.html",
  "name": "nw-demo",
  "description": "demo app of node-webkit",
  "version": "0.1.0",
  "keywords": [ "demo", "node-webkit" ],
  "window": {
    "title": "node-webkit demo",
    "toolbar": true,
    "frame": true,
    "width": 800,
    "height": 500,
    "position": "center",
    "min_width": 400,
    "min_height": 200,
    "max_width": 800,
    "max_height": 600
  },
  "webkit": {
    "plugin": true
  }
}

其中main属性用来指定入口文件，这个属性值能够是本地文件，也能够是远程网址（至关于把一个远程的web界面直接变成一个桌面应用了）。其它的属性，好比：图标、窗口栏、初始化的大小等等能够参考官方文档。git

3.生成EXE可执行文件

将index.html和package.json这两个文件压缩到一个zip压缩包里，命名为app.zip

把app.zip这个文件的扩展名改成nw,变为 app.nw

将app.nw放置到nw.exe同一级目录，进入windows cmd后运行这个命令：github

copy /b nw.exe+app.nw app.exe

而后会生成app.exe文件。

咱们可使用以下的几种方式安装到客户的电脑上：
1.直接RAR打包，发给用户，这也就是个绿色版，无需安装。
2.咱们用软件工具 Enigma Virtual Box 封包，用这个工具能够把整个应用程序文件夹生成一个单独的app.exe, 用户直接双击就能运行，这个也是无需安装的。
3.用软件工具innosetup，这个工具会生成一个安装版本。web

4.修改icon

默认状况下建立出来的应用程序（exe）会和nw.exe的图标同样，能够经过resource hacker这个工具来修改nw.exe的图标成你所想要的。

打开resource hacker，找到对应的图片组资源(icon group),而后右击选择替换（replace）就能够了。

chrome

5.封包

在进行打包前，首先把咱们在NWJS_SDK版本（是在NWJS_SDK版本下进行开发的)下的package.json、app.exe、app文件夹复制到NWJS_NORMAL版本中，而且删除NWJS_NORMAL版本中的nw.exe文件。

json

5.1 Enigma Virtual Box

官网上推荐用Enigma Virtual Box这个软件来将app.exe和依赖的dll打包成一个exe后发布

在选择待封包的主程(Enter Input File Name)输入app.exe的路径
在封包程序另存(Enter Output File Name)输入可执行程序的输出路径
拖入文件和文件夹，选择nwjs_normal的配置文件(除了app.exe的其它文件和文件夹)

点击封包后，封包结束后会获得app_boxed.exe。而后删除app_boxed.exe以外的全部文件和文件夹（若是在封装的时候没有拖入全部的文件，那么就不能删除那些未参与封包的文件），而后就能够获得最后的可执行文件app_boxed.exe

从截图能够看出，这个app_boxed.exe是免安装的，能够点击直接运行。这是Enigma Virtual Box封包的优势，无需安装直接运行，但缺点就是太大了，从截图能够看出app_boxed.exe达到了202MB。

5.2 Inno Setup

这是另外一种打包方式，就是用Inno Setup来打包成安装程序，即将一开始的web应用源文件和node-webkit的nw.exe和一些以来dll直接压缩成一个安装文件，咱们并不须要上述中间那先打包成app.exe的步骤。用户在使用你的exe后会出现setup wizard把程序安装到Program Files目录中，将nw.exe，dll，web应用释放出来，这个时候所生成的安装文件其实大小会小不少。

下载安装运行后点击File->New即进入建立步骤

填写应用发布的信息：

添加应用程序的打包文件：

执行后续操做，进行编译：

生成可执行EXE：
咱们能够看出安装包的大小是54.3MB,Inno Setup的优势就是安装包小，但缺点就是须要进行安装。