如何为 dotnet core(web Api) 代码更改以及 TypeScript 代码更改启用实时重新加载

Posted 2023-03-08

【中文标题】如何为 dotnet core(web Api) 代码更改以及 TypeScript 代码更改启用实时重新加载

【英文标题】：How to enable live reload for dotnet core(web Api) code change as well as TypeScript code change

【发布时间】：2017-06-05 06:51:58

【问题描述】：

我有一个用于 Web API 开发的 Asp.Net Core 应用程序以及 Angular 2 (Typescript) 中的客户端代码。

出于构建目的，我在使用 WebPack 的同时也使用“webpack-dev-server”。

目前我在“Package.Json”文件中有 2 个脚本，

"scripts": 
"startWebpackDevServer": "webpack-dev-server --inline --progress --port 8080",
"build": "SET NODE_ENV=development && webpack -d --color && dotnet run"

，

当我运行命令“npm run startWebpackDevServer”时，Web 应用程序在端口“8080”上可用，并且只要我更改任何客户端代码（typescript+angular），实时重新加载 正在发生并且更改会自动出现在浏览器中。 （太棒了）。

但是，在端口“8080”中，我的 Web API 调用给了我 404，为什么？

当我运行命令“npm run build”时，Web 应用程序在端口“5000”可用，Web API 调用也给了我结果，这里缺少的是“live reload”。

我正在寻找一个应该重新加载的命令， A.打字稿+角码的任何变化& B. Web API (C#) 代码的任何更改。

请推荐！

【参考方案1】：

我不是 100% 确定我得到了您的问题，但我怀疑您是否可以拥有一个实时重新加载 Web Api 的命令。首先，它与节点没有任何关系。您可以尝试对 .Net Core 使用 watch 命令或类似命令。

您可以查看here如何使用手表。否则，如果您只是在 Visual Studio 中构建应用程序并在 IIS（或 IIS Express）后面运行它，这几乎可以做到这一点。

【参考方案2】：

我不完全了解您的需求，但您仍然有答案。

您可以使用http-server 和watch 执行此操作。为了在更改 javascript 项目 (web) 或 C# 项目 (API) 时实现实时重新加载，建议将您的 web 和 web api 项目放在同一文件夹下。

你必须在 webpack 中禁用 watch 并避免使用 webpack 开发服务器因为你将有一个外部工具（watch 和 http-server）来监视文件更改并重新加载/服务页面。

如下所示，全局安装http-server 和watch npm 模块。

> npm install -g http-server watch

watch 将监视文件当前工作目录中的文件更改。如果在 javsacript 代码或 c# 代码中发生任何更改，它将执行作为 CLI 选项给出的命令。该命令将使用http-server 重新加载页面。

package.json 中的构建任务可能如下所示。

"build:dev": "SET NODE_ENV=development && dotnet run && webpack -d --color && npm run serve",
"watch": "watch 'npm run build:dev' -p=node_modules|Bin|Obj|lib -d",
"serve": "http-server -p 8080",
"start": "npm run build:dev && npm run watch"

现在执行 > npm start 来构建、服务和监视 web 和 api。

【讨论】：

感谢您的回复。我试过了，但似乎不起作用。感谢，如果你能提供一些示例项目。再次感谢

【参考方案3】：

“dotnet watch run”应该做 webapi live-reload。标记应添加到 Microsoft.DotNet.Watcher.Tools 的项目文件中。