web-dev-qa-db-ja.com

スクリプトバンドルに別のスクリプトバンドルを含める

これらの2つのスクリプトバンドルを構成したとしましょう。

bundles.Add(new ScriptBundle("~/Scripts/Bootstrap").Include(
        "~/Content/Scripts/jQuery/jquery-2.1.1.js",
        "~/Content/Scripts/Bootstrap/bootstrap.js"));

bundles.Add(new ScriptBundle("~/Scripts/jQuery").Include(
        "~/Content/Scripts/jQuery/jquery-2.1.1.js"));

ご覧のとおり、~/Scripts/BoostrapはjQueryJavaScriptファイルとBootstrap 1つを使用します。これは、Bootstrap 1つはjQueryが機能する必要があるためです。

一方、~/Scripts/jQueryはjQueryファイルのみで構成されています。

ビューに必要なのがjQueryのみで、Bootstrapが必要ない場合に備えて、2つのバンドルが必要です。

ただし、ここではコードを複製しています。jQueryJavaScriptファイルパスを定義していますtwice。

~/Scripts/Boostrapバンドルに別のバンドルを使用または「注入」するように指示する方法はありますか？

このようなもの：

bundles.Add(new ScriptBundle("~/Scripts/Bootstrap").UseBundle("~/Scripts/jQuery").Include(
        "~/Content/Scripts/Bootstrap/bootstrap.js"));
c#asp.netasp.net-mvcasp.net-mvc-3asp.net-mvc-4
21
Matias Cicero

スクリプトバンドルに別のスクリプトバンドルを含める

Bundlingクラスを直接使用していません。

あなたのシナリオで、ビジネスがすべてのリクエストに対して単一のバンドルのみをクライアントに送信することを決定したとしましょう。 （この魔法の世界で）各コントローラーに必要なすべてのスクリプトをバンドルすることにしました。あなたはこのようなものから始めるかもしれません：

bundles.Add(new ScriptBundle("~/Scripts/Home")
                .Include("~/Content/Scripts/jQuery/jquery-2.1.1.js",
                         "~/Content/Scripts/Bootstrap/bootstrap.js"
                         "~/Content/Scripts/Home.js"));

bundles.Add(new ScriptBundle("~/Scripts/Account")
                .Include("~/Content/Scripts/jQuery/jquery-2.1.1.js",
                         "~/Content/Scripts/Bootstrap/bootstrap.js"
                         "~/Content/Scripts/Account.js"));

次に、 。Include（string []） は単に文字列の配列を取るだけであることに気付くと、 [〜＃〜] dry [〜＃〜] コードを次のようになります。

var commonScripts = new List<string>()
{
    "~/Content/Scripts/jQuery/jquery-2.1.1.js",
    "~/Content/Scripts/Bootstrap/bootstrap.js"
};

var homeScripts = new List<string>()
{
  "~/Content/Scripts/Home.js"
};

bundles.Add(new ScriptBundle("~/bundles/home/")
                .Include(commonScripts.Concat(homeScripts).ToArray()));

var accountScripts = new List<string>()
{
  "~/Content/Scripts/Account.js"
};

bundles.Add(new ScriptBundle("~/bundles/account/")
                .Include(commonScripts.Concat(accountScripts).ToArray()));

このソリューションの背後にあるビジネス上の理由はお勧めしませんが、それを解決するロジックを同様に使用して問題を解決できると思います。

重複する可能性があると思われる場合は、次のこともできます。

                .Include(commonScripts.Concat(accountScripts)
                                      .Distinct()
                                      .ToArray()));

個人的には、jQueryまたはBootStrapは、オンラインの多くのCDNから無料で入手できるため、バンドルには含めません。Aは帯域幅の使用量が少ないことを意味し、Bはクライアントがすでにダウンロードしている可能性があります。必要なスクリプト（とにかく一般的なスクリプト/スタイルにCDNが存在する理由）。

12
Erik Philips

.UseBundle(someBundle)構文を使用してバンドルを作成できるComposableBundleラッパークラスを作成することも検討できます。

たとえば、次のクラスと拡張メソッド。

public class ComposableBundle<T> where T : Bundle
{
    private T _bundle;
    private List<string> _virtualPaths = new List<string>();

    public ComposableBundle(T bundle)
    {
        _bundle = bundle;
    }

    public string[] VirtualPaths
    {
        get { return _virtualPaths.ToArray(); }
    }

    public T Bundle
    {
        get { return _bundle; }
    }

    public ComposableBundle<T> Include(params string[] virtualPaths)
    {
        _virtualPaths.AddRange(virtualPaths);
        _bundle.Include(virtualPaths);
        return this;
    }

    public ComposableBundle<T> UseBundle(ComposableBundle<T> bundle)
    {
        _bundle.Include(bundle.VirtualPaths.ToArray());
        return this;
    }
}

public static class BundleExtensions
{
    public static ComposableBundle<T> AsComposable<T>(this T bundle) where T : Bundle
    {
        return new ComposableBundle<T>(bundle);
    }

    public static ComposableBundle<T> Add<T>(this BundleCollection bundles, ComposableBundle<T> bundle) where T: Bundle
    {
        bundles.Add(bundle.Bundle);
        return bundle;
    }
}

次のようにバンドルを構成できますか？

var jQueryBundle = bundles.Add(new ScriptBundle("~/bundles/jquery").AsComposable()
                            .Include("~/Scripts/jquery-{version}.js"));

bundles.Add(new ScriptBundle("~/bundles/jqueryui").AsComposable()
                .UseBundle(jQueryBundle)
                .Include("~/Scripts/jquery-ui-{version}.js"));
10
Daniel J.G.