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",
// pkg的入口文件
  "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