使用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应用已成功运行。
打包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-builder-phoenix使用
https://github.com/evshiron/nwjs-builder-phoenix
(完)