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

本文关键字：脚本 包包含 另一个 一个 | 更新日期: 2023-09-27 18:34:47

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

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

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

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

不直接使用捆绑类。

假设在您的场景中，企业决定为每个请求仅向客户端发送一个捆绑包。 您决定捆绑每个控制器所需的所有脚本(在这个神奇的世界中(。 你可以从这样的东西开始：

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<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 对于常见脚本/样式存在的原因(。

您还可以

考虑创建一个 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"));
相关文章：