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

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 包使用或“注入”另一个包？

类似这样的：

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

Answer 1

让一个脚本包包含另一个脚本包

不直接使用捆绑类。

假设在您的场景中，企业决定为每个请求仅向客户端发送一个捆绑包。您已决定捆绑每个控制器所需的所有脚本（在这个神奇的世界中）。您可能会从以下内容开始：

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 仍然存在用于常见脚本/样式的原因）。

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