Typescript 的熱重載在 Visual Studio 2022 中的 Razor class 庫中編譯

Question

I'm sure I'm overlooking something obvious, but I have a Razor Class Library where I'm compiling my MVC views, and also writing my client-side stuff in Typescript compiled down to a single Javascript file. 我有一個使用 RCL 的 web 項目。 當我在 RCL 中更改 a.cshtml 視圖時，web 項目盡職盡責地確認更改並刷新瀏覽器。 但是，當我更改 a.ts 文件時，它會觸發 Typescript 編譯器並輸出 a.js 文件，它不會刷新依賴的 web 項目中的瀏覽器。

現在，我可能過於復雜了。 我的 RCL 項目如下所示：

/Client
--/src
----tsconfig.json
----tsfiles.ts
--/dist/outputfile.js
/wwwroot
--/dist/outputfile.js

我有一個從/Client/dist復制到/wwwroot/dist的 gulpfile。 我的tsconfig.json看起來像這樣：

{
  "compileOnSave": true,
  "compilerOptions": {
    "target": "es6",
    "sourceMap": true,
    "outFile": "../dist/Client.js",
    "experimentalDecorators": true,
    "noImplicitAny": true,
    "suppressImplicitAnyIndexErrors": true
  }
}

我被困住了，因為我不了解潛在的魔法。 更改 RCL 中的任何.cshtml文件都會在瀏覽器中觸發熱重載，查看引用 RCL 的 web 項目。 當我更新.ts文件時，什么都沒有發生，顯然 gulp 文件也不會觸發。 我必須重建 web 項目才能獲得最新的垃圾。

我想要的結果是，在 RCL 中保存.ts文件會在瀏覽器中觸發與更改.cshtml文件相同的熱重載。 我的 RCL 在.csproj中有以下內容。

<TypescriptOutDir>wwwroot</TypescriptOutDir>
<StaticWebAssetBasePath Condition="$(StaticWebAssetBasePath) == ''">/</StaticWebAssetBasePath>
<ResolveCurrentProjectStaticWebAssetsInputsDependsOn>
    CompileTypeScript;
    $(ResolveCurrentProjectStaticWebAssetsInputs)
</ResolveCurrentProjectStaticWebAssetsInputsDependsOn>

需要明確的是，當我手動重建 web 項目時，RCL 的wwwroot中的文件在引用 RCL 項目的 web 應用程序中按預期可見。 它們在正確的地方使用，只是沒有發生熱重載。 它使單獨的項目參考非常難以使用。

編輯：有趣的是，我在 a.cshtml 文件中添加了一個廢棄的代碼行，如果我保存，它會觸發更新。 如果我有 gulp 文件更改文件並保存，它不會觸發更新。 因此，管道似乎在 VS 2022 本身中。 更改 CSS 文件也不會觸發它，盡管在這兩種情況下，如果它位於正在運行的項目而不是依賴的 RCL 中，它就會觸發。

Answer 1

如果您的 JS 文件位於 wwwroot 文件夾中（無需特殊操作），Visual Studio 默認會觸發 hotreload。

因此，您可以執行以下操作之一：

將 tsconfig.json outFile 從"outFile": "../dist/Client.js"更改為"outFile": "../../wwwroot/dist/Client.js" 。 不需要 gulp 任務。

或者您可以在 gulp 中有一個監視任務，監視 Client/dist/Client.js 並將其復制到 wwwroot/dist/Client.js 請參閱這篇關於如何進行 gulp 監視文件更改的文章： https ://gulpjs.com/docs /en/getting-started/watching-files/

Answer 2

事實證明，我已經接近解決方案了。 關鍵是要確保tsconfig在保存時編譯，並輸出到wwwroot文件夾。 我無法確認，但我在傳輸過程中看到一篇帖子說您的項目文件中需要一個<AssignTargetPathsDependsOn>CompileTypeScript;$(AssignTargetPathsDependsOn)</AssignTargetPathsDependsOn> 。

無論如何，我在 RCL 中編輯 Typescript 文件並重新加載正在使用的 web 項目。