nw.js是用于构建桌面应用程序,可以把JS/DOM 打包成一个桌面应用程序,支持Linux、Mac、Windows。nw是基于Node.js。
本教程以React进行构建,Vue/Angular同样适用。
安装nw和nw-builder
nw是开发环境用的,nw-builder是打包用的。
// 本地安装
npm install nw nw-builder -D
// 或全局安装
npm install nw nw-builder -g
安装React脚手架
如果你已经安装跳过此步
npm install create-react-app -g
创建React
这步等待时间非常长…
create-react-app react-app
打包React
// 先进入react-app 目录
cd react-app
// 然后打包, 这个时候当前目录多出一个build文件夹,这个就是打包出来的目录文件
npm run build
编辑package.json
在react-app当前目录有一个叫package.json, 注意请不要跟着我打上注释,只是为了方便理解
// 找到scripts字段,
"scripts": {
"start": "node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
// 增加这2个, 上面创建的时候就有
// build/ 意思就是指向当前build目录,开发用
"nw-dev": "nw build/",
// --platforms 后面是需要打包出来的平台,按自己的需求选择一些需要的。
// dist/ 是打包出来的目录名,里面会有打包出来的应用程序, build/是打包目标
"nw-build": "nwbuild --platforms win32,win64,osx64,linux32,linux64 --buildDir dist/ build/"
},
在build目录新建package.json
React打包好后build目录新建一个package.json,写入以下字段, 注意把下面注释全干掉不然会出问题。
{
// 应用程序名字
"name": "博客客户端",
// 版本号,每次打包要更改
"version": "1.0.0",
// 入口文件指向当前index.html
"main": "index.html",
// 这个就是配置信息了
"window": {
// 窗口的最小宽度
"min_width":1270,
// 窗口的最小高度
"min_height":700,
// 标题栏图标,jpg/png,只有windows管用
"icon": "assets/favicon.png",
// 启动的时候的位置, 中心
"position": "center"
}
}
nw开发测试
在终端回到react-app目录执行以下命令, 这个时候回弹出nw窗口,如果窗口跟网页显示一样说明测试通过。
npm run nw-dev
nw打包
当前目录多出了dist目录,里面就是打包出来的应用程序,至此整个过程结束。
npm run nw-build
关于package.json其他的配置信息
{
"name": "桌面应用",
"version": "1.0.0",
"main": "index.html",
"window": {
// 最小宽度
"min_width":1050,
// 最小高度
"min_height":600,
// 标题栏图标,jpg/png,只有windows管用
"icon": "icon.png",
// 打开应用的位置, "center"或"mouse"或null
"position": "center",
// 最大宽度
"max_width": 1000,
// 最小宽度
"max_height": 1000,
// 窗口标题,如果你的html文件没有指定title就会默认为这个
"title": "标题",
// 是否显示导航栏
"toolbar": false,
// 是否允许调整窗口大小
"resizable": true,
// 窗口是否置顶
"always-on-top": false,
// 是否全屏
"fullscreen": false,
// 是否在任务栏显示图标
"show_in_taskbar": false
}
}
有兴趣的可以看看官方文档