在github-action工作流使用nw和nw-builder打包
在github action工作流使用nw和nw-builder打包
前言
经过vite打包后生成html等的文件，虽然可以运行，突然想把打包成exe文件
可以使用electron，笔者在网上搜索了一下，居然有个东西交nw，也可以进行打包，
既然如此，好好好，使用一下工作流。
参考文章
[十分钟轻松入门 nw.js 实现桌面应用程序-CSDN博客
“十分钟轻松入门 nw.js 实现桌面应用程序-CSDN博客”)
[使用 nw-builder 构建跨平台桌面应用程序 - axl234 - 博客园
“使用 nw-builder 构建跨平台桌面应用程序 - axl234 - 博客园”)
[nw-builder - npm
“nw-builder - npm”)
正文
本地打包
安装
笔者在本地使用pnpm
pnpm add -g nw nw-builder一个不必要的bug
安装nw后，按道理来说，
运行如下命令
nw -v就可以出现一个窗口。
但是
运行上面的命令。出现的内容如下
➜ nw -v
Error: spawn C:\Users\26644\AppData\Local\pnpm\global\5pnpm\nw@0.96.0\node_modules\nw\nwjs-v0.96.0-win-x64\nw.exe ENOENT
at ChildProcess._handle.onexit (node:internal/child_process:286:19)
at onErrorNT (node:internal/child_process:484:16)
at process.processTicksAndRejections (node:internal/process/task_queues:90:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn C:\\Users\\26644\\AppData\\Local\\pnpm\\global\\5\pnpm\\nw@0.96.0\\node_modules\\nw\\nwjs-v0.96.0-win-x64\\nw.exe',
path: 'C:\\Users\\26644\\AppData\\Local\\pnpm\\global\\5\pnpm\\nw@0.96.0\\node_modules\\nw\\nwjs-v0.96.0-win-x64\\nw.exe',
spawnargs: [ '-v' ]
}
node:internal/modules/run_main:104
triggerUncaughtException(
^
Error: spawn C:\Users\26644\AppData\Local\pnpm\global\5pnpm\nw@0.96.0\node_modules\nw\nwjs-v0.96.0-win-x64\nw.exe ENOENT
at ChildProcess._handle.onexit (node:internal/child_process:286:19)
at onErrorNT (node:internal/child_process:484:16)
at process.processTicksAndRejections (node:internal/process/task_queues:90:21) {
errno: -4058,
code: 'ENOENT',
syscall: 'spawn C:\\Users\\26644\\AppData\\Local\\pnpm\\global\\5\pnpm\\nw@0.96.0\\node_modules\\nw\\nwjs-v0.96.0-win-x64\\nw.exe',
path: 'C:\\Users\\26644\\AppData\\Local\\pnpm\\global\\5\pnpm\\nw@0.96.0\\node_modules\\nw\\nwjs-v0.96.0-win-x64\\nw.exe',
spawnargs: [ '-v' ]
}
Node.js v23.7.0报错了，经过deepseek的回答，它判断是否有nw.exe文件？
即下面这个目录的存在
C:\\Users\\26644\\AppData\\Local\\pnpm\\global\\5\pnpm\\nw@0.96.0\\node_modules\\nw\\nwjs-v0.96.0-win-x64\\nw.exe我打开目录。
没有nwjs-v0.96.0-win-x6目录了。然后，笔者发现这里面既有src，又有node_modes，难道这是个项目，因此。笔者打开package.json，在script中，发现了一个脚本postinstall
猜测这个postinstall脚本的意思是
post 请求进行install
意思就是发送一个post请求，进行安装，笔者尝试了一下
虽然报错了， 但是，查看目录
感觉有了。
再次刚开始的目录下运行 nw -v
结果如下
运行成功。
准备打包
笔者通过vite打包生成的目录如下，
可惜没有一个关键的东西，需要在01-dist目录下新建一个package.json，才能运行。感觉很麻烦。
但是，笔者突然想到 只要在publice目录下写下package.json，打包之后不就有package.json 了。
先public目录下新建一个package.json文件，内容如下
{
"name": "01-dist",
"version": "1.0.0",
"main": "index.html",
"window": {
"icon": "vite.svg"
}
}上面四点name，version，main，icon，缺一不可。
少了一个，要么无法运行，要么报错。
再次打包
完美。
运行命令
nwbuild --mode=build --glob=false --flavor=sdk --cacheDir=./node_modules/nw --outDir=../build ./具体命令的含义可参考官网，也许可以把运行命令也写入public/package.json中
{
"name": "01-dist",
"main": "index.html",
"version": "1.0.0",
"window": {
"icon": "vite.svg"
},
"scripts": {
"build": "nwbuild --mode=build --glob=false --flavor=sdk --cacheDir=./node_modules/nw --outDir=../build ./"
}
}再次打包。进入01-dist目录， 运行 pnpm run build
结果如下，。
这里就发现，好像不需要安装nw，因为nw-builder在运行的时候会自动安装nw，所以前面的bug是不必要的。
本地安装成功，很好。
再次思考，我是通过全局nw-builder进行打包。如果不使用全局，懂了，因此
再次修改public/package.json目录，使其拥有nw-builder依赖。
最终内容如下
public/package.json
{
"name": "01-dist",
"main": "index.html",
"version": "1.0.0",
"window": {
"icon": "vite.svg"
},
"dependencies": {
"nw-builder": "^4.13.9"
},
"scripts": {
"build": "nwbuild --mode=build --glob=false --flavor=sdk --cacheDir=./node_modules/nw --outDir=../build ./"
}
}工作流打包
流程
1、读取仓库代码
2、安装node
3、第一次打包(vite）
4、第二次打包(nw-builder)
5、上传打包结果
因此
.github/workflows/01-start.yaml文件的内容如下
name: 打包01项目
on:
workflow_dispatch:
inputs:
ad:
description: '打包'
required: true
default: 'true'
type: boolean
jobs:
build:
runs-on: windows-latest
steps:
- name: 读取项目
uses: actions/checkout@v4
- name: 设置node版本
uses: actions/setup-node@v4
with:
node-version: '22'
- name: 安装依赖并第一次打包
run: |
cd 01-quick-start
npm install
npm run build
- name: 第二次打包
run: |
cd 01-dist
npm install
npm run build
- name: 上传
uses: actions/upload-artifact@v4
with:
name: build
path: build结果如下
有点大。