【ASP.NET C#】Vue.jsやその他のjavascriptライブラリをDebugとReleaseで自動的に切り替える正しい方法

4172 ワード
ASP.NET_MVC Vue.js JavaScript ASP.NET C# JavaScript テキストリンク

経緯

ASP.NET Web ApplicationでデフォルトのSite.Masterにこんな感じにかかれていたため、他のライブラリでやる方法を探していた。

<asp:ScriptReference Name="jquery" />
<asp:ScriptReference Name="bootstrap" />

検索すると自力で切り替えている人など居たので、Microsoftのブログ通り、こんな感じでどうでしょう。
えっ、常識？
と言うか、英語のマニュアル読めば、最初から書いてある簡単なことでした。

ASP.NET Webフォームでのやりかた

  1. Nugetでvue.jsもしくはお目当てのライブラリをインストールしたり、Scriptsに直接置く。（なんでも良いけど）

  2. Global.asaxのApplication_Startに記載する。（バージョン番号を変数にしたほうがスマートかもね。）

ScriptResourceDefinition scriptRefVue = new ScriptResourceDefinition();
scriptRefVue.Path = "~/Scripts/vue.min.js"; // リリース用
scriptRefVue.DebugPath = "~/Scripts/vue.js"; // デバッグ用
scriptRefVue.CdnPath = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.min.js"; // CDNのリリース用
scriptRefVue.CdnDebugPath = "https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"; // CDNのデバッグ用
ScriptManager.ScriptResourceMapping.AddDefinition("vue", null, scriptRefVue); // ここで指定した名前がマッピングされる
  1. Site.MasterのScriptManagerタグ内に追加
<asp:ScriptReference Name="vue" />

出ました！

ASP.NET MVCの場合

ASP.NET MVCだと、APP_Start.BundleConfig.csに１つ書くだけだそう。フォルダにmin.jsがあれば、リリース時にそっちを見てくれるとか。
便利な世の中になったもんだ。

bundles.Add(new ScriptBundle("~/bundles/vue").Include(
                        "~/Scripts/vue.js"));

_Layout.cshtmlにはやはり１行

@Scripts.Render("~/bundles/vue")