Angular + Nodejs Web应用打包成exe可执行文件并打开浏览器

懒是技术进步的一大原因。这不,为了实现领导快速方便的检查我们正在开发的应用,就研究了一下如何把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

Angular + Nodejs Web应用打包成exe可执行文件并打开浏览器

上一篇:.Net Core 3.0中的gRPC


下一篇:.NET 开源导入导出库 Magicodes.IE 2.5发布