node.js - 如何让 Angular 监视多个库的更改并在需要时重新编译

Question

这个问题与Make angular app watch for libraries changes and update itself非常相似。但是，这个问题从来没有成功地回答过，因为它适用于多个库的使用。我还查看了Angular 库和实时重新加载，并调查了这两个问题的答案和链接。

我的应用程序正在使用两个库：lib-1和lib-2. 当这些文件被编辑时，它们被忽略并且应用程序不会重新编译。要查看更改，我必须重新启动服务器，这确实会减慢速度。

我的期望是在编辑库文件时应该重新编译应用程序，就像在编辑其他应用程序内部文件时一样。

这是我继承的一个Angular项目，原作者已经不在了。我正在使用 Angular v10 和 npm 6.14.11

最初的 npm 脚本是：

"start:staging": "ng serve --configuration-staging --host 0.0.0.0 --port 8080 --disableHostCheck",
"build:lib-1": "ng build lib-1 && cpx projects/lib-1/src/lib/theme.scss dist/lib-1",
"build:lib-2": "ng build lib-2 && cpx projects/lib-2/src/lib/theme.scss dist/lib-2",
"build:libs": "npm run build:lib-1 && npm run build:lib-2",

有了这些，我首先运行npm run build:libs，然后npm run start:staging。如前所述，这不会“监视”我的库以进行更改。

我查看了建议和其他 SO 问题（上图），确保现在安装了npm-run-all,wait-on和库。rimraf

我编写了这些新的 npm 脚本：

"clean": "rimraf dist",
"start-app": "wait-on dist/lib-1/fesm2015 dist/lib-2/fesm2015 && start:staging --poll 2000",
"watch:lib-1": "npm run build:lib-1 --watch",
"watch:lib-2": "npm run build:lib-2 --watch",
"watch-libs": "npm-run-all --parallel watch:lib-1 watch:lib-2",
"watch-all": "npm-run-all clean --parallel watch-libs start-app"

而且，我正在使用预先存在的start:staging脚本，如所写。

我跑npm run watch-all。

脚本运行并继续并行构建库（坏主意？），然后抛出错误：sh: start:staging: command not found。

我卸下了--parallel开关并再次尝试，并得到了同样的错误。

该start:staging脚本确实在脚本对象中，我无法弄清楚为什么找不到它。

我希望得到一些关于更正我的语法的明智建议，以便应用程序能够编译并观察我的库文件以及应用程序src文件夹中的其他文件。

标签： node.jsangularnpmnpm-scriptsangular-library

Answer 1

经过一番调查，我发现了Nikola Kolev 的 Angular 6：构建——在一个 shell 帖子中观察多个依赖库。

虽然我没有像 Nikola 那样只使用一个 npm 脚本，但我可以通过运行两个脚本来完成（总共涉及 7 个脚本），现在这已经足够了。当我有更多时间时，我会努力浓缩成一个。

首先，确保安装了wait-on、rimraf和npm-run-all。我们也在使用cpx；但是，这并不是要让库被“监视”——只是包括过于彻底。

以下是所有脚本：

"clean": "rimraf dist",
"watch-lib:lib-1": "ng build lib-1 --watch",
"watch-lib:lib-2": "ng build lib-2 --watch",
"watch-libs": "npm-run-all clean --parallel watch-lib:*",
"copy-styles:lib-1": "cpx projects/lib-1/src/lib/theme.scss dist/lib-1",
"copy-styles:lib-2": "cpx projects/lib-2/src/lib/theme.scss dist/lib-2",
"start-staging": "ng serve --configuration-staging --host 0.0.0.0 --port 8080 --disableHostCheck",  
"watch-staging": "npm-run-all copy-styles:* start:staging"

当我想在库上工作并让它们被“监视”时，我会npm run watch-libs在一个终端中运行。完成后，我npm run watch:staging在第二个终端运行。然后，我可以在浏览器中启动应用程序，对任何代码、库或应用程序本身的任何编辑都会被捕获，并且应用程序会根据需要重新编译。