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

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

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

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

不直接使用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 []）只需要一个字符串数组，你可以将你的代码干掉如下：

 var commonScripts = new List() { "~/Content/Scripts/jQuery/jquery-2.1.1.js", "~/Content/Scripts/Bootstrap/bootstrap.js" }; var homeScripts = new List() { "~/Content/Scripts/Home.js" }; bundles.Add(new ScriptBundle("~/bundles/home/") .Include(commonScripts.Concat(homeScripts).ToArray())); var accountScripts = new List() { "~/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 where T : Bundle { private T _bundle; private List _virtualPaths = new List(); public ComposableBundle(T bundle) { _bundle = bundle; } public string[] VirtualPaths { get { return _virtualPaths.ToArray(); } } public T Bundle { get { return _bundle; } } public ComposableBundle Include(params string[] virtualPaths) { _virtualPaths.AddRange(virtualPaths); _bundle.Include(virtualPaths); return this; } public ComposableBundle UseBundle(ComposableBundle bundle) { _bundle.Include(bundle.VirtualPaths.ToArray()); return this; } } public static class BundleExtensions { public static ComposableBundle AsComposable(this T bundle) where T : Bundle { return new ComposableBundle(bundle); } public static ComposableBundle Add(this BundleCollection bundles, ComposableBundle 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"));