JavaScript
C#
ASP.NET
vue.js
ASP.NET_MVC

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

経緯

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/vue@2.5.13/dist/vue.min.js"; // CDNのリリース用
scriptRefVue.CdnDebugPath = "https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"; // CDNのデバッグ用
ScriptManager.ScriptResourceMapping.AddDefinition("vue", null, scriptRefVue); // ここで指定した名前がマッピングされる
  1. Site.MasterのScriptManagerタグ内に追加
<asp:ScriptReference Name="vue" />

出ました!

image.png

ASP.NET MVCの場合

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

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

_Layout.cshtmlにはやはり1行

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