Edited at

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

More than 1 year has passed since last update.


経緯

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" />

出ました!


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")