Question

假设我配置了这两个脚本包：

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使用jQuery JavaScript文件和Bootstrap文件。这是因为Bootstrap需要jQuery才能工作。

另一方面，~/Scripts/jQuery仅由jQuery文件组成。

我希望有两个捆绑包以防视图只需要jQuery而不需要Bootstrap。

但是，我在这里复制代码，我正在定义jQuery JavaScript文件路径两次。

有没有办法告诉~/Scripts/Boostrap捆绑使用或＆＃34;注入＆＃34;另一捆？

这样的事情：

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

Answer 1

使脚本包包含另一个脚本包

不直接使用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;一种方法我使用的带宽较少，而客户端可能已经下载了我需要的脚本（无论如何，CDN存在于常见脚本/样式的原因）。

Answer 2

您还可以考虑创建一个ComposableBundle包装类，它允许您使用.UseBundle(someBundle)语法组合包。

例如以下类和扩展方法：

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

使脚本包包含另一个脚本包

2 个答案: