angular打包（三）:pkg

希望打包成1个web服务，运行exe，启动 angular，供浏览器显示。

问题分析：

其实angular编译后，都是静态文件了。只需要打包express，让express可以以exe的形式运行就可以了。

pkg的坑很多，写下来。

1 打包配置

这部分最坑。官网说的也不太清楚，绕了很多弯路。

我的最终做法如下：

1 在ng工程下单独建1个文件夹 命名为pkg（随便）

2 在pkg里建立package.json：

{
  "name": "frontend",
  "bin": "server.js",
  "dependencies": {
    "express": "4.17.1"
  },
  "pkg": {
    "assets": ["../dist/**/*"]
  }
}

说明：

1 只需要打包express作为静态文件服务器。

用于伺服ng build 之后的dist文件夹即可，而不是把整个ng工程都打包。

因为ng是前端，只是在开发过程中用npm/node 进行包管理，而不是用node写的后端服务。

——一开始没想清这个，也确实发现pkg的问题：无法正确打包normalize.css 库， 然后才发现，我其实根本不需要打包这个。

2 dist文件夹全部当做assets处理。

即默认的ng编译出的文件位置。ng已经对文件进行了编译（--aot）。

3 建立server.js

const express = require('express');
const app = express();
const path = require('path');

const path_dist = path.join(path.resolve(__dirname, '..'), 'dist')
app.use(express.static(path_dist));

app.get('/*', (req, res) => {
    res.sendFile(path.join(path_dist, 'index.html'));
  });

var server = app.listen(4000, function () {
    var host = server.address().address
    var port = server.address().port
    console.log(`server start successfully on http://${host}:${port}`)
})

说明：

1 静态文件指向外层dist文件夹

2 express 路由 写成/*,  保证直接访问任意host:port/XX/YY 这样的url时，都能正确处理。

　express 只负责把任意路由都指向  index.html就够了,

ng居然后面能自动正确处理路由。

这一点还是很智能，很省心的。

2 用pkg打包

win+R cmd,  cd到包含server.js和package.json的路径下 执行

pkg server.js -t win-x64 --config package.json

坑点1：必须显式指定 --config ，否则只会孤零零打包server.js一个文件。

启动服务后，如果是简单hello world会正确，但是ng工程 浏览器会提示

cannot GET /

因为根没用package.json，所以dist根本就没打包进来

坑点2：打包时，会首先下载一个pkg专用的node 二进制文件， 40M左右，发布的打包exe就是基于这个的。不同平台，不同node版本不同。好像只支持node长期版，比如10 12这样的。

但是国内网不好，下载很慢，甚至总是中断。

尝试每天不同时段下载试试，反正不下载好这个，是根本无从打包的。

下载位置：

C:\Users\用户名\.pkg-cache

v2.6 文件夹 是 pkg@4.4.0 用的  比如给windos 和 node12用的 就是 fetched-v12.2.0-win-x64

2.5 是 之前的版本

一旦下载好后：可以保存起来，复制到别的机器上，避免再次下载。

—— 最终打包成功后exe的体积约等于 下载的40M二进制文件 + dist文件夹的体积。

------------------------后记-----------------------------

用pkg打包坑点太多。 搜索了不少文章，但是误导，含混居多。包括官方文档，也不是太清楚。所以我就不列出引用了。

但是最终打包出来还是很小巧可人的。

总是打包失败的时候，我一度想直接用py的flask+ cxfreeze打包算了。那样必然体积大些。

现在这样很好。又学会1招。