MVC 5，全球化，验证德国日期：如何捆绑 js 脚本？

Question

在这个问题的答案中 (MVC 5 - can not get globalisation running) 我用一堆 "

我没有管理的：我想捆绑脚本。如果我这样尝试（摘自 bundleConfig.cs）：

 bundles.Add(new ScriptBundle("~/bundles/jqueryvalDe").Include(
                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery.validate.unobtrusive.js",
                    "~/Scripts/cldr.js",
                        "~/Scripts/cldr/event.js",
                        "~/Scripts/cldr/supplemental.js",
                        "~/Scripts/cldr/unresolved.js",
                        "~/Scripts/globalize.js",
                        "~/Scripts/globalize/currency.js",
                        "~/Scripts/globalize/number.js",
                        "~/Scripts/globalize/date.js",
                        "~/Scripts/globalize/plural.js",
                        "~/Scripts/globalize/relative-time.js",
                        "~/Scripts/globalize/unit.js",
                        "~/Scripts/jquery.validate.globalize.js"
                    ));

但是我从 JavaScript 得到一个错误："Globalize" 未定义

好像，脚本的顺序变了...

目前我使用了一个解决方法：我编写了一个自定义的 HTM-Helper。

 public static class GermanDateValidationExtension
{
    public static MvcHtmlString ScriptsForGermanDateValidation(this HtmlHelper helper)
    {
        return new MvcHtmlString("<script src=\"~/ Scripts / jquery.validate.js\"></script>\n" +
                                 "<script src = \"~/Scripts/jquery.validate.unobtrusive.js\"></script>\n" +
                                 "<script src = \"~/Scripts/cldr.js\"></script>\n" +
                                 "<script src = \"~/Scripts/cldr/event.js\"></ script>\n" +
                                 "<script src = \"~/Scripts/cldr/supplemental.js\"></script>\n" +
                                 "<script src = \"~/Scripts/cldr/unresolved.js\"></script>\n" +
                                 "<script src = \"~/Scripts/globalize.js\"></script>\n" +
                                 "<script src = \"~/Scripts/globalize/currency.js\" ></script>\n" +
                                 "<script src = \"~/Scripts/globalize/number.js\"></script>\n" +
                                 "<script src = \"~/Scripts/globalize/date.js\"></script>\n" +
                                 "<script src = \"~/Scripts/globalize/plural.js\" ></script>\n" +
                                 "<script src = \"~/Scripts/globalize/relative-time.js\"></script>\n" +
                                 "<script src = \"~/Scripts/globalize/unit.js\"></script>\n" +
                                 "<script src = \"~/Scripts/jquery.validate.globalize.js\"></script>\n" +
                                 "<script>\n" +
                                 "$.when(\n" +
                                 "$.get(\"/Scripts/cldr/main/de/ca-gregorian.json\"),\n" +
                                 "$.get(\"/Scripts/cldr/main/de/numbers.json\"),\n" +
                                 "$.get(\"/Scripts/cldr/supplemental/likelySubtags.json\"),\n" +
                                 "$.get(\"/Scripts/cldr/supplemental/timeData.json\"),\n" +
                                 "$.get(\"/Scripts/cldr/supplemental/weekData.json\")\n" +
                                 ").then(function() {\n" +
                                 "return [].slice.apply(arguments, [0]).map(function(result) {\n" +
                                 "return result[0];\n" +
                                 "});\n" +
                                 "}).then(Globalize.load)\n" +
                                 ".then(function() {\n" +
                                 "Globalize.locale(\"de-DE\");\n" +
                                 "});\n" +
                                 "</ script > ");
    }

}

并在视图中使用它：

...
@section Scripts {      
@Html.ScriptsForGermanDateValidation()
}  
...

我的问题是：如何正确捆绑脚本？

Answer 1

解决方案是——Tetsuya Yamamoto 如是说：写你自己的订购者。

public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
    {
        return files;
    }

并使用它：

 var qvDeBundle  =new ScriptBundle("~/bundles/jqueryvalDe").Include(
                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery.validate.unobtrusive.js",
                    "~/Scripts/cldr.js",
                        "~/Scripts/cldr/event.js",
                        "~/Scripts/cldr/supplemental.js",
                        "~/Scripts/cldr/unresolved.js",
                        "~/Scripts/globalize.js",
                        "~/Scripts/globalize/currency.js",
                        "~/Scripts/globalize/number.js",
                        "~/Scripts/globalize/date.js",
                        "~/Scripts/globalize/plural.js",
                        "~/Scripts/globalize/relative-time.js",
                        "~/Scripts/globalize/unit.js",
                        "~/Scripts/jquery.validate.globalize.js"
                    );         
        qvDeBundle.Orderer=new UnorderBundleOrderer();
        bundles.Add(qvDeBundle);

Answer 2

问题似乎源于 jquery.validate.globalize.js 在 globalize.js 之前呈现的捆绑顺序，它使用 "dependency tree" 建立以支持知名库，并且它们的自定义扩展将在其他库之前呈现。因此，为了根据需要设置加载顺序，创建一个 class 实现 IBundleOrder 接口及其相应的扩展方法：

// from Sebastián Rojas (/a/26602075)
class UnorderedBundleOrderer : IBundleOrderer
{
    public IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
    {
        return files;
    }
}

static class BundleExtensions
{
    public static Bundle UnorderedBundling(this Bundle bundle)
    {
        bundle.Orderer = new UnorderedBundleOrderer();
        return bundle;
    }
}

然后您可以在 BundleConfig.cs 文件中使用上面的自定义捆绑顺序：

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jqueryvalDe")
           .UnorderedBundling()
           .Include(
            "~/Scripts/jquery.validate.js",
            "~/Scripts/jquery.validate.unobtrusive.js",
            ...
            ...
            "~/Scripts/globalize.js",
            ...
            ...
            "~/Scripts/jquery.validate.globalize.js"
    ));
}

MVC 5，全球化，验证德国日期：如何捆绑 js 脚本？

MVC 5, globalize, validate german date: How to bundle the js-scripts?

asp.net-mvc

bundling-and-minification

asp.net-mvc-5

jquery-globalize