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

时间：2020-12-07 22:07:25 阅读：93 评论：0 收藏：0 [点我收藏+]

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

原文：https://www.cnblogs.com/JasonWang-code/p/14099319.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)