4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2018-02-01

経緯

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")
4
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
4
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?