.esproj（JavaScript・TypeScriptプロジェクトシステム）
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
単語検索
|
最終更新
|
ヘルプ
]
開始行:
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicros...
-戻る（[[ASP.NET SPA]]、[[ASP.NET Core]]）
--[[Web Essentials]]
--[[ASP.NET Core SPAテンプレート]]
--.esproj（JavaScript・TypeScriptプロジェクトシステム）
* 目次 [#c6f34b2c]
#contents
*概要 [#ie1b8f4c]
-Visual Studio 2022から本格導入された、モダンなSPA開発をC...
-従来のように「.csprojの中に無理やりJavaScriptのファイル...
*詳細 [#odffefde]
...VSCode使えば良いのでは？...
**CLIの利用 [#t2b2bfb3]
VSはVSCと同様に、生のnpm、npx、またはyarn、pnpmなどのCLI...
**解決した3つの課題 [#nc0c1995]
.esprojの導入により、Visual StudioでのWeb開発は以下のよう...
-ビルド
--...が重い：C#をビルドするたびにnpm run buildが走り、時...
--...の分離：デバッグ時はVite等の高速なHMR（Hot Module Re...
-PJ依存関係
--...がごちゃ混ぜ：NuGetパッケージとnpmパッケージの管理が...
--...の完全分離：バックエンドは.csproj（NuGet）、フロント...
-デバッグの
-...開始が面倒：APIとSPAを両方立ち上げるために、手動でタ...
-...マルチスタートアップ：VSの「開始」ボタン1つで、APIの...
**ファイルの中身（仕組み） [#f4e3ca51]
.esprojファイルの実体は、C#の.csprojなどと同じXML形式（MS...
<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0....
<PropertyGroup>
<StartupCommand>npm run dev</StartupCommand>
<JavaScriptTestRoot>src\</JavaScriptTestRoot>
<JavaScriptTestFramework>Jest</JavaScriptTestFramewo...
<SpawnServerScript >true</SpawnServerScript>
<BuildOutputFolder>$(MSBuildProjectDirectory)\dist</...
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Debug...
<ShouldRunBuildScript>false</ShouldRunBuildScript>
</PropertyGroup>
<ItemGroup>
<Folder Include="src\assets\" />
</ItemGroup>
</Project>
-重要なMSBuildプロパティ
--ShouldRunNpmInstall: true（デフォルト）にしておくと、VS...
--ShouldRunBuildScript: 製品リリース用（Publish）ビルドの...
**ASP.NETとの「プロキシ連携」 [#z66f4aaa]
-.esproj テンプレート（例：React with ASP.NET Core）を選...
--SPA側（Vite等）のポート: localhost:5173
--API側（C#）のポート: localhost:7200
-開発中、SPA側から /api/weather のようにリクエストを送る...
**どんな人に向いている？ [#l41ed86b]
-Visual Studio 1つで開発を完結させたい：「C#のデバッグはV...
-CI/CD（ビルドパイプライン）を一本化したい：MSBuildの仕組...
*参考 [#de3d0797]
...
----
Tags: [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP...
終了行:
「[[マイクロソフト系技術情報 Wiki>http://techinfoofmicros...
-戻る（[[ASP.NET SPA]]、[[ASP.NET Core]]）
--[[Web Essentials]]
--[[ASP.NET Core SPAテンプレート]]
--.esproj（JavaScript・TypeScriptプロジェクトシステム）
* 目次 [#c6f34b2c]
#contents
*概要 [#ie1b8f4c]
-Visual Studio 2022から本格導入された、モダンなSPA開発をC...
-従来のように「.csprojの中に無理やりJavaScriptのファイル...
*詳細 [#odffefde]
...VSCode使えば良いのでは？...
**CLIの利用 [#t2b2bfb3]
VSはVSCと同様に、生のnpm、npx、またはyarn、pnpmなどのCLI...
**解決した3つの課題 [#nc0c1995]
.esprojの導入により、Visual StudioでのWeb開発は以下のよう...
-ビルド
--...が重い：C#をビルドするたびにnpm run buildが走り、時...
--...の分離：デバッグ時はVite等の高速なHMR（Hot Module Re...
-PJ依存関係
--...がごちゃ混ぜ：NuGetパッケージとnpmパッケージの管理が...
--...の完全分離：バックエンドは.csproj（NuGet）、フロント...
-デバッグの
-...開始が面倒：APIとSPAを両方立ち上げるために、手動でタ...
-...マルチスタートアップ：VSの「開始」ボタン1つで、APIの...
**ファイルの中身（仕組み） [#f4e3ca51]
.esprojファイルの実体は、C#の.csprojなどと同じXML形式（MS...
<Project Sdk="Microsoft.VisualStudio.JavaScript.Sdk/1.0....
<PropertyGroup>
<StartupCommand>npm run dev</StartupCommand>
<JavaScriptTestRoot>src\</JavaScriptTestRoot>
<JavaScriptTestFramework>Jest</JavaScriptTestFramewo...
<SpawnServerScript >true</SpawnServerScript>
<BuildOutputFolder>$(MSBuildProjectDirectory)\dist</...
</PropertyGroup>
<PropertyGroup Condition="'$(Configuration)' == 'Debug...
<ShouldRunBuildScript>false</ShouldRunBuildScript>
</PropertyGroup>
<ItemGroup>
<Folder Include="src\assets\" />
</ItemGroup>
</Project>
-重要なMSBuildプロパティ
--ShouldRunNpmInstall: true（デフォルト）にしておくと、VS...
--ShouldRunBuildScript: 製品リリース用（Publish）ビルドの...
**ASP.NETとの「プロキシ連携」 [#z66f4aaa]
-.esproj テンプレート（例：React with ASP.NET Core）を選...
--SPA側（Vite等）のポート: localhost:5173
--API側（C#）のポート: localhost:7200
-開発中、SPA側から /api/weather のようにリクエストを送る...
**どんな人に向いている？ [#l41ed86b]
-Visual Studio 1つで開発を完結させたい：「C#のデバッグはV...
-CI/CD（ビルドパイプライン）を一本化したい：MSBuildの仕組...
*参考 [#de3d0797]
...
----
Tags: [[:.NET開発]], [[:.NET Core]], [[:ASP.NET]], [[:ASP...
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
