懒是技术进步的一大原因。这不,为了实现领导快速方便的检查我们正在开发的应用,就研究了一下如何把web应用打包成exe可执行文件,并且自动打开浏览器,这样,领导只需要轻轻地点击一下,就可以看到酷炫的页面了。
环境:
- 前端:Angular
- 后端:Nodejs + Koa
- 打包工具:pkg库
- 打开浏览器库:open库
这里做一个demo,只有一个http,获取数据后保存到本地的某个文件夹中。
代码如下:
index.js
const Koa = require(‘koa‘);
const Router = require(‘koa-router‘);
// koa默认body不是json,这里使用koa-boduyparser来parse body
const bodyParser = require(‘koa-bodyparser‘);
const app = new Koa();
const router = new Router();
// 使用koa-cors来进行cors
const cors = require(‘koa-cors‘);
// 使用koa-static来导出静态文件
const staticServer = require(‘koa-static‘);
const fs = require(‘fs‘)
const path = require(‘path‘);
const open = require(‘open‘);
router.post(‘/add‘, async (ctx) => {
const requestBody = ctx.request.body;
const fileStr = requestBody.str;
const fileName = requestBody.name;
const path = requestBody.path;
console.log(requestBody);
let err;
const p = new Promise((resolve, reject) => {
fs.writeFile(`${path}\\${fileName}.py`, fileStr, (error) => {
if (error) {
console.log(error.message);
err = error;
reject(error);
} else {
console.log(‘success‘);
resolve();
}
})
})
try {
await p;
ctx.response.body = {msg: ‘success‘};
} catch (e) {
ctx.response.body = {msg: err.message};
}
})
app.use(cors());
app.use(bodyParser());
// 这里导出静态文件时表现使用path.join,否则在使用pkg库打包时,没有办法匹配路径
app.use(staticServer(path.join(__dirname, ‘public‘)));
app.use(router.routes());
app.use(router.allowedMethods());
app.listen(3000);
console.log(‘Server is running in http://localhost:3000‘);
console.log(‘Start to open the default browser‘);
setTimeout(() => {
// 使用open库打开浏览器
open(‘http://localhost:3000‘);
// open库实际上是使用了start命令,所以也可以写成下面这样,
// const cp = require(‘child_process‘)
// cp.exec(‘start chrome http://localhost:3000‘);
console.log(‘Default browser is opened.‘);
});
这里需要注意的是,实际的使用中,发现pkg在打包时遇到open库会报错误。
The file must be distributed with executable as %2.
%1: node_modules\open\xdg-open
%2: path-to-executable/xdg-open
没找到原因,所以在实际应用中没有使用open库。
打包时使用到的pkg库,可以使用package.json来配置打包的流程。
package.json
{ "name": "appcomposer-tool-backend", "version": "1.0.0", "description": "", "main": "index.js", "bin": "index.js", "scripts": { "start": "node index.js", "pkg": "pkg package.json -t win -o appcomposertool", "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "koa": "^2.13.0", "koa-bodyparser": "^4.3.0", "koa-cors": "0.0.16", "koa-router": "^10.0.0", "koa-static": "^5.0.0", "pkg": "^4.4.9" },
// 下面是配置pkg库的地方 "pkg": {
// 这里导出了静态文件 "assets": [ "public/*" ] } }
pkg库地址 https://www.npmjs.com/package/pkg