14

MVC4ベータ版に含まれているバンドリングとミニファイを使い始めました。私はそれに関していくつかの問題に遭遇しています:

1つには、従来のバンドルを使用する場合<script src="Folder/js" type="text/javascript"/>、ファイルの名前を変更して、適切な順序でバンドルされていることを確認する必要があるようです。

  • 「ants.js」、「bugs.js」、「insects.js」の3つのJavaScriptファイルがあるとします。
  • ants.jsはbugs.jsに依存しています
  • bugs.jsはinsects.jsに依存しています
  • デフォルトのバンドルは、アルファベット順にバンドルしているようです。
  • それらを適切にバンドルするには、名前を「0.insects.js」、「1.bugs.js」、「2.ants.js」に変更する必要があります。
  • それは本当にハックであり、よりクリーンな方法が必要です。

私が抱えている次の問題はデバッグです。テストブラウザでJavaScriptをステップ実行するのが好きですが、DEBUGモードでミニファイだけをオフにする方法はありますか?

編集:明確にするために、私はバンドルを作成してC#から登録できることを知っています、それをそのように行わなければならないのは本当に醜いようです。

4

4 に答える 4

11

縮小されていない出力を一時的に取得するには、これを使用します

  public class NonMinifyingJavascript : IBundleTransform
{
    public void Process(BundleContext context, BundleResponse bundle)
    {
        if(bundle == null)
        {
            throw new ArgumentNullException("bundle");
        }

        context.HttpContext.Response.Cache.SetLastModifiedFromFileDependencies();

        foreach(FileInfo file in bundle.Files)
        {
            HttpContext.Current.Response.AddFileDependency(file.FullName);
        }

        bundle.ContentType = "text/javascript";
        //base.Process(context, bundle);
    }
}

完全に構成設定に基づいて必要な場合は、構成設定に応じて、これまたはJsMinifyに委任するIBundleトランスフォームを作成できると思います。

javascriptファイルの順序を制御するには、BundleFileSetOrderingを使用する必要があります

 var javascriptBundle = new Bundle("~/site/js", new NonMinifyingJavascript());

         //controls ordering for javascript files, otherwise they are processed in order of AddFile calls
         var bootstrapOrdering = new BundleFileSetOrdering("bootstrap");
         //The popover plugin requires the tooltip plugin
         bootstrapOrdering.Files.Add("bootstrap-tooltip.js");
         bootstrapOrdering.Files.Add("bootstrap-popover.js");
         BundleTable.Bundles.FileSetOrderList.Add(bootstrapOrdering);
         javascriptBundle.AddDirectory("~/Scripts", "bootstrap-*.js");
于 2012-03-12T15:52:47.717 に答える
7

chrisortmanによって提案されたNonMinifyingJavascriptの代わりに、MVCのデフォルトのNoTransformを使用します。私の知る限り、それは同じことをします。しかし、それでも最適ではありません。理想的には、デバッグするときに、個々のスクリプトファイルごとにスクリプトタグが必要です。これにより、私が使用したいVS11でのデバッグがはるかに簡単になります(1つのデバッガーでjsとc#を1つのデバッグセッションでデバッグできます)。だから私はこの小さなヘルパーを作成しました:

@helper RenderScriptTags(string virtualPath)
{
    if (Minify /* some appsetting */)
    {
        <script src="@System.Web.Optimization.BundleTable.Bundles.ResolveBundleUrl(virtualPath)"></script>
    }
    else
    {
        foreach (var file in System.Web.Optimization.BundleResolver.Current.GetBundleContents(virtualPath))
        {
            <script src="@Url.Content(file)"></script>
        }
    }
}

@RenderScriptTags("~/libraries")

私はシングルページアプリを持っているので、これをメインのcshtmlファイルに持っていますが、これをhtmlhelper拡張メソッドに移動することで簡単に一般化できます。うまくいきます!

このコードでは、BundleFileSetOrderingを設定している場合は、それも考慮に入れています。

于 2012-03-14T10:26:34.877 に答える
2

RequestReduceも見てください。スクリプトとCSSは、ページ上でどのように配置されているかを確認し、それに応じてバンドルすることで、コーディングや構成なしでバンドルされます。また、web.configを介して、またはクエリ文字列paramを介して個々のリクエストに対してバンドルとミニファイをオフにすることもできますRRFilter=disabled

于 2012-03-11T18:33:06.543 に答える
1

昨日同じ問題が発生し、新しいSystem.Web.Optimization名前空間で適切な解決策を見つけることができませんでした。壊れたMSDNリンクがいくつかあったので、すべてがベータ版であるという事実は、それが変更される可能性があることを意味しますが、私は逸脱します...

開発中と本番環境では、常に異なる方法でスクリプトをロードできます。AppSettingで簡単に実行できます。

@if (System.Configuration.
    ConfigurationManager.AppSettings["BundleResources"] != null)
{
    @* load the css & js using bundles *@
}
else
{
    @* load the css & js files individually*@
}

次に、web.configでアプリ設定をコメントアウトすることにより、最適化を有効/無効にできます。

<appSettings>
    ...
    <!--<add key="BundleResources" value="uhuh" />-->
    ...
</appSettings>
于 2012-03-11T18:20:59.570 に答える