Make a script bundle include another script bundle

Question

Let's suppose I have these two script bundles configured:

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

As you can see, ~/Scripts/Boostrap uses a jQuery JavaScript file and a Bootstrap one. This is because the Bootstrap one requires jQuery to work.

On the other hand, ~/Scripts/jQuery is composed of only the jQuery file.

I want to have two bundles in case a view only needs jQuery and not Bootstrap.

However, I am replicating code here, I am defining the jQuery JavaScript file path twice.

Is there a way to tell the ~/Scripts/Boostrap bundle to use or "inject" another bundle?

Something like this:

bundles.Add(new ScriptBundle("~/Scripts/Bootstrap").UseBundle("~/Scripts/jQuery").Include(
        "~/Content/Scripts/Bootstrap/bootstrap.js"));

Why not just have the jQuery bundle be only jQuery and the bootstrap bundle be only bootstrap. On your view, include jQuery and if necessary, bring in the bootstrap bundle. I don't see what including jquery in two separate bundles would really buy you other than saving one script tag in your HTML. — Tommy
– Tommy, Commented Dec 18, 2014 at 18:41
@Tommy I could do that, and the work of the client doing one more request is barely noticeable, but if there's a more optimal way to accomplish what I want, and still making the client just send one single request for both scripts, it would be great — Matias Cicero
– Matias Cicero, Commented Dec 18, 2014 at 18:44
Unfortunately, there's nothing that can be said here other than, no, it's not possible. There's no way to reference a bundle in another bundle. — Chris Pratt
– Chris Pratt, Commented Dec 18, 2014 at 19:19
From a programmers point of view I want to have two bundles in case a view only needs jQuery and not Bootstrap sounds perfectly logical from a world where we are uninformed about caching. As soon as caching is involved, the idea of bundles per view is actually worse in performance than multiple scripts per view beyond the first request (more often than not). — Erik Philips
– Erik Philips, Commented Dec 18, 2014 at 20:53

Erik Philips · Accepted Answer · 2014-12-18 20:42:14Z

Make a script bundle include another script bundle

Not directly using the Bundling class.

Let say in your scenario that the business decides to only send a single bundle to the client for every request. You've decided to bundle all the scripts needed for each controller (in this magical world). You might start off with something like this:

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

Then realizing that .Include(string[]) simply takes an array of string, you could DRY your code into something like:

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()));

I don't recommend the business reasons behind this solution, but I think the logic that solves it could be used similarly to solve your problem.

If you think you're going to possibly have duplicates you could also:

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

Personally I wouldn't include jQuery or BootStrap in bundles, as they are available from many CDNs online for free which; A means I use less of my bandwidth, and B the client may have already downloaded the scripts I need (The reasons CDNs exist for common scripts/styles anyway).

Daniel J.G. · Accepted Answer · 2014-12-18 22:32:38Z

11

You could also consider creating a ComposableBundle wrapper class that allows you to compose bundles with the .UseBundle(someBundle) syntax.

For example the following class and extensions methods:

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;
    }
}

Would allow you to configure your bundles like this:

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

answered Dec 18, 2014 at 22:32

Daniel J.G.

35.2k9 gold badges117 silver badges115 bronze badges

6 Comments

Shaiju T Over a year ago

The wrapper is good, now i also want to order the bundle files using this post , how can mix both ?

Daniel J.G. Over a year ago

Its been a while since i wrote this, but I think you should be able to add another fluent method UseOrderer(orderer) where you set _bundle.orderer. I would suggest give that a try and open a new question if it doesn't work.

Shaiju T Over a year ago

Thanks for responding , I tried but I am getting error, here is the question.

Sinjai Over a year ago

What was your reasoning behind UseBundle rather than IncludeBundle? I presume you could chain UseBundle, which to me means you'd want to continue using the existing phrasing (Include).

Sinjai Over a year ago

Also, not that it matters much, ComposableBundle<T>.UseBundle() calls .ToArray() on an array.

|

Collectives™ on Stack Overflow

Make a script bundle include another script bundle

2 Answers 2

Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related