使用nwjs-builder-phoenix构建跨平台桌面应用程序

NW.js应用自动打包的两种方式:

nwjs-builder-phoenix(推荐)
nw-builder

本文主要讲述使用nwjs-builder-phoenix构建跨平台桌面应用程序,对NW.js项目进行自动化打包。

具体步骤如下:
(1)创建firstapp应用;
(2)修改package.json打包配置;
(3)安装nwjs-builder-phoenix依赖、运行及打包;
通过build --tasks win-x86,win-x64,mac-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .命令来实现不同平台的打包。

1、创建firstapp应用

1.1执行npm init初始化应用

D:\whw\study\nwjs\firstapp>npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (firstapp)
version: (1.0.0)
description: first Nw.js Demo
entry point: (index.js) index.html
test command:
git repository:
keywords:
author: whw
license: (ISC)
About to write to D:\whw\study\nwjs\firstapp\package.json:

{
  "name": "firstapp",
  "version": "1.0.0",
  "description": "first Nw.js Demo",
  "main": "index.html",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "whw",
  "license": "ISC"
}


Is this OK? (yes) yes

D:\whw\study\nwjs\firstapp>

1.2创建index.html文件

文件内容:

<!DOCTYPE html>
<html>
  <head>
    <title>Hello World!</title>
  </head>
  <body>
    <h1>Hello World!</h1>
  </body>
</html>

2、修改package.json打包配置

新增以下依赖及构建配置:

"build": {
    "nwVersion": "0.41.2"
},
"scripts": {
    "dev": "run -x86 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
    "build": "build --tasks win-x86,win-x64,mac-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
},
"devDependencies": {
    "nwjs-builder-phoenix": "^1.14.3"
}

完整的package.json内容如下所示:

{
    "name": "helloworld",
    "main": "index.html",
    "version": "0.0.1",
    "description": "first Nw.js Demo",
    "build": {
        "nwVersion": "0.41.2"
    },
    "scripts": {
        "dev": "run -x86 --mirror https://npm.taobao.org/mirrors/nwjs/ .",
        "build": "build --tasks win-x86,win-x64,mac-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ ."
    },
    "devDependencies": {
        "nwjs-builder-phoenix": "^1.14.3"
    },
    "author": "",
    "license": "ISC"
}

3、安装依赖、运行及打包

安装应用依赖:npm i 或 npm install

运行NW.js应用:npm run dev

如果能正常打开如下窗口,则说明NW.js应用已成功运行。

nwjs-03.pngnwjs-03.png

打包NW.js应用:npm run build
打包日志如下:

D:\whw\study\nwjs\firstapp>npm run build

> firstapp@1.0.0 build
> build --tasks win-x86,win-x64,mac-x64 --mirror https://npm.taobao.org/mirrors/nwjs/ .

Starting building tasks... {
  tasks: [ [ 'win', 'x86' ], [ 'win', 'x64' ], [ 'mac', 'x64' ] ],
  concurrent: false
}
Building for win, x86 starts...
Fetching NW.js binary... { platform: 'win', arch: 'x86', version: '0.41.2', flavor: 'normal' }

[===============================================---] 10508.82KB/s 0.5s

Building targets...
Building directory target starts...
Building directory target ends within 4.44s.
Building for win, x86 ends within 13.74s.
Building for win, x64 starts...
Fetching NW.js binary... { platform: 'win', arch: 'x64', version: '0.41.2', flavor: 'normal' }

[==================================================] 9293.34KB/s 0.0s

Building targets...
Building directory target starts...
Building directory target ends within 4.93s.
Building for win, x64 ends within 15.52s.
Building for mac, x64 starts...
Fetching NW.js binary... { platform: 'mac', arch: 'x64', version: '0.41.2', flavor: 'normal' }

[==============================================----] 9947.31KB/s 0.9s

Building targets...
Building directory target starts...
Building directory target ends within 4.83s.
Building for mac, x64 ends within 17.78s.

D:\whw\study\nwjs\firstapp>

打包完之后,进入应用根目录dist文件夹下查看,可以看到不同平台对应的文件包:

nwjs-04.pngnwjs-04.png

如上,即表示打包成功。

参考:
nwjs-builder-phoenix使用
https://github.com/evshiron/nwjs-builder-phoenix

(完)

最后修改于:2022年09月24日 11:00

添加新评论