强制 ASP.Net MVC Bundle 以特定顺序呈现 javascript 文件答案

【问题标题】：Force ASP.Net MVC Bundle to render the javascript files in a certain order强制 ASP.Net MVC Bundle 以特定顺序呈现 javascript 文件
【发布时间】：2013-01-28 13:45:57
【问题描述】：

我正在开发一个 ASP.Net MVC 4 应用程序，并使用 Bundling 和 minifiction 来呈现样式和脚本文件。

我有一个脚本文件（File A）调用另一个文件（File B）中的函数，当我使用
@Scripts.Render()它呈现的方法时link File A 标记在 File B 之前，因此它会触发错误并且脚本无法正常工作。

有什么方法可以强制@Script.Render() 以特定顺序呈现link 标签而不为每个文件使用单独的包？？？？

编辑

我正在使用IncludeDirectory 方法来包含该文件夹中的所有脚本文件

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/js").IncludeDirectory(
                    "~/Scripts/js",
                    "*.js"));
    }
}

【问题讨论】：

请说明您如何将脚本添加到您的页面和捆绑包中。您可以创建自己的包并按您想要的顺序添加脚本。 stackoverflow.com/questions/14544277/…
@MikeSmithDev 谢谢，您提供的帖子很有帮助，但我很贪心:) 并想知道是否有其他方法可以做到这一点
来自 www.asp.net：“通过通配符添加脚本默认按字母顺序加载它们，这通常不是您想要的。CSS 和 JavaScript 文件经常需要以特定（非-alphabetic) 顺序。您可以通过添加自定义 IBundleOrderer 实现来降低此风险，但显式添加每个文件不太容易出错。"
@MikeSmithDev 即使不使用 * 我仍然可以按随机顺序下载
@Nikos 没有看到你的代码，IDK。我展示的两种方法都可以指定顺序。请注意，即使您指定了一个顺序，它将将某些已知脚本移到前面（如 jquery），因此可能就是这样。否则，我在设置脚本去哪里时没有问题。

标签： asp.net .net-4.0 asp.net-mvc-4 bundle bundling-and-minification

【解决方案1】：

默认情况下，捆绑会按字母顺序添加脚本。它将在已知的库中移动并以正确的顺序添加它们（例如，它将首先放入 jQuery，然后是 jQuery-ui）。

最简单的方法是自己订购脚本。一种方法是将您的自定义脚本移至不同的文件夹，然后按照您想要的顺序将所有脚本添加到它们自己的包中：

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/js").IncludeDirectory(
                    "~/Scripts/js","*.js"));

        bundles.Add(new ScriptBundle("~/bundles/myScripts").Include(
            "~/Scripts/custom/scriptB.js",
            "~/Scripts/custom/scriptA.js"));
    }
}

另一个选项是通配符。此选项仍然包括将您的自定义脚本移动到它们自己的文件夹，但只有一个包 (source)：*

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {       
        bundles.Add(new ScriptBundle("~/bundles/js").Include(
            "~/Scripts/*.js",
            "~/Scripts/custom/scriptB.js",
            "~/Scripts/custom/scriptA.js"));
    }
}

还关于您的评论“有什么方法可以强制@Script.Render() 以特定顺序呈现link 标记，而无需为每个文件使用单独的包”——请注意，单独的链接标记仅在调试模式下发生。一旦你在发布模式下部署，将只有一个链接标签和一个文件。

【讨论】：

【解决方案2】：

将您自己的订购者写成 Darin Dimitrov 回答此问题：How can I specify an explicit ScriptBundle include order?

public class MyBundleOrderer : IBundleOrderer
{
    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        //any ordering logic here

        return files;
    }
}

【讨论】：

我让custom IBundleOrderer 更进一步，让它处理每个文件并确定依赖链。有点晚了，但它可能会对未来的搜索者有所帮助。

【解决方案3】：

查看 BundleCollection.FileSetOrderList 以了解捆绑文件的顺序。我发现了这篇关于它的博文：http://weblogs.asp.net/imranbaloch/archive/2012/09/30/hidden-options-of-asp-net-bundling-and-minification.aspx，它很好地解释了它。

JQuery 排序示例代码：

BundleFileSetOrdering bundleFileSetOrdering1 = new BundleFileSetOrdering("jquery");
bundleFileSetOrdering1.Files.Add("jquery.js");
bundleFileSetOrdering1.Files.Add("jquery-min.js");
bundleFileSetOrdering1.Files.Add("jquery-*");
bundleFileSetOrdering1.Files.Add("jquery-ui*");
bundleFileSetOrdering1.Files.Add("jquery.ui*");
bundleFileSetOrdering1.Files.Add("jquery.unobtrusive*");
bundleFileSetOrdering1.Files.Add("jquery.validate*");
bundles.FileSetOrderList.Add(bundleFileSetOrdering1);

【讨论】：

【解决方案4】：

您应该考虑使用 Cassette http://getcassette.net/ 它支持基于在每个文件中找到的脚本引用自动检测脚本依赖项。

如果您更喜欢坚持 MS Web 优化解决方案，但喜欢根据脚本参考安排脚本的想法，您应该阅读我的博文http://blogs.microsoft.co.il/oric/2013/12/27/building-single-page-application-bundle-orderer/

【讨论】：