Wie kann ich eine explizite ScriptBundle-Include-Reihenfolge angeben?

Ich probiere die MVC4 System.Web.Optimization 1.0 ScriptBundle-Funktion aus .

Ich habe die folgende Konfiguration:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        // shared scripts
        Bundle canvasScripts =
            new ScriptBundle(BundlePaths.CanvasScripts)
                .Include("~/Scripts/modernizr-*")
                .Include("~/Scripts/json2.js")
                .Include("~/Scripts/columnizer.js")
                .Include("~/Scripts/jquery.ui.message.min.js")
                .Include("~/Scripts/Shared/achievements.js")
                .Include("~/Scripts/Shared/canvas.js");
        bundles.Add(canvasScripts);
    }
}

und die folgende Ansicht:

<script type="text/javascript" src="@Scripts.Url(BundlePaths.CanvasScripts)"></script>

wo BundlePaths.CanvasScriptsist "~/bundles/scripts/canvas". Es macht dies:

<script type="text/javascript" src="/bundles/scripts/canvas?v=UTH3XqH0UXWjJzi-gtX03eU183BJNpFNg8anioG14_41"></script>

So weit so gut, außer ~/Scripts/Shared/achievements.jsdas erste Skript in der gebündelten Quelle. Es hängt von jedem Skript ab, das zuvor in der ScriptBundle. Wie kann ich sicherstellen, dass die Reihenfolge eingehalten wird, in der ich dem Bundle Include-Anweisungen hinzufüge?

Aktualisieren

Dies war eine relativ neue ASP.NET MVC 4-Anwendung, die jedoch auf das Pre-Release-Paket des Optimierungsframeworks verwies. Ich habe es entfernt und das RTM-Paket von http://nuget.org/packages/Microsoft.AspNet.Web.Optimization hinzugefügt . Bei der RTM-Version mit debug = true in web.config werden @Scripts.Render("~/bundles/scripts/canvas")die einzelnen Skript-Tags in der richtigen Reihenfolge gerendert .

Mit debug = false in web.config verfügt das kombinierte Skript zuerst über das Skript settings.js. Da es sich jedoch um eine später aufgerufene Funktionsdefinition (Objektkonstruktor) handelt, wird es fehlerfrei ausgeführt. Vielleicht ist der Minifier klug genug, um Abhängigkeiten herauszufinden?

Ich habe auch die IBundleOrdererImplementierung ausprobiert, die Darin Dimitrov mit RTM mit beiden Debug-Optionen vorgeschlagen hat, und sie hat sich gleich verhalten.

Die verkleinerte Version ist also nicht in der von mir erwarteten Reihenfolge, aber sie funktioniert.

Dieses Verhalten tritt bei den RTM-Bits nicht auf. Verwenden Sie die Bits des Microsoft ASP.NET Web Optimization Framework 1.0.0: http://nuget.org/packages/Microsoft.AspNet.Web.Optimization ?

Ich habe einen ähnlichen Repro wie Ihr Beispiel verwendet, der auf einer neuen MVC4-Internetanwendungswebsite basiert.

Ich habe BundleConfig.RegisterBundles hinzugefügt:

        Bundle canvasScripts =
            new ScriptBundle("~/bundles/scripts/canvas")
                .Include("~/Scripts/modernizr-*")
                .Include("~/Scripts/Shared/achievements.js")
                .Include("~/Scripts/Shared/canvas.js");
        bundles.Add(canvasScripts); 

Und dann habe ich auf der Standardindexseite hinzugefügt:

<script src="@Scripts.Url("~/bundles/scripts/canvas")"></script>

Und ich habe überprüft, dass in dem minimierten Javascript für das Bundle der Inhalt von Errungenschaften.js nach der Modernisierung ...

Sie können einen benutzerdefinierten Bundle-Besteller ( IBundleOrderer) schreiben , der sicherstellt, dass Bundles in der Reihenfolge enthalten sind, in der Sie sie registrieren:

public class AsIsBundleOrderer : IBundleOrderer
{
    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        return files;
    }
}

und dann:

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        var bundle = new Bundle("~/bundles/scripts/canvas");
        bundle.Orderer = new AsIsBundleOrderer();
        bundle
            .Include("~/Scripts/modernizr-*")
            .Include("~/Scripts/json2.js")
            .Include("~/Scripts/columnizer.js")
            .Include("~/Scripts/jquery.ui.message.min.js")
            .Include("~/Scripts/Shared/achievements.js")
            .Include("~/Scripts/Shared/canvas.js");
        bundles.Add(bundle);
    }
}

und aus Ihrer Sicht:

@Scripts.Render("~/bundles/scripts/canvas")

Danke Darin. Ich habe eine Erweiterungsmethode hinzugefügt.

internal class AsIsBundleOrderer : IBundleOrderer
{
    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        return files;
    }
}

internal static class BundleExtensions
{
    public static Bundle ForceOrdered(this Bundle sb)
    {
        sb.Orderer = new AsIsBundleOrderer();
        return sb;
    }
}

Verwendung

bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                    "~/Scripts/jquery-{version}.js",
                    "~/Scripts/jquery-migrate-{version}.js",

                    "~/Scripts/jquery.validate.js",
                    "~/Scripts/jquery.validate.messages_fr.js",
                    "~/Scripts/moon.jquery.validation-{version}.js",

                    "~/Scripts/jquery-ui-{version}.js"
                    ).ForceOrdered());

Die Antwort von SoftLion wurde aktualisiert, um Änderungen in MVC 5 (BundleFile vs FileInfo) zu verarbeiten.

internal class AsIsBundleOrderer : IBundleOrderer
{
    public virtual IEnumerable<BundleFile> OrderFiles(BundleContext context, IEnumerable<BundleFile> files)
    {
        return files;
    }
}

internal static class BundleExtensions
{
    public static Bundle ForceOrdered(this Bundle sb)
    {
        sb.Orderer = new AsIsBundleOrderer();
        return sb;
    }
}

Verwendung:

    bundles.Add(new ScriptBundle("~/content/js/site")
        .Include("~/content/scripts/jquery-{version}.js")
        .Include("~/content/scripts/bootstrap-{version}.js")
        .Include("~/content/scripts/jquery.validate-{version}")
        .ForceOrdered());

Ich verwende gerne fließende Syntax, aber es funktioniert auch mit einem einzigen Methodenaufruf und allen als Parameter übergebenen Skripten.

Sie sollten in der Lage sein, die Reihenfolge mithilfe der BundleCollection.FileSetOrderList festzulegen. Schauen Sie sich diesen Blog-Beitrag an: http://weblogs.asp.net/imranbaloch/archive/2012/09/30/hidden-options-of-asp-net-bundling-and-minification.aspx . Der Code in Ihrer Instanz wäre ungefähr so:

BundleFileSetOrdering bundleFileSetOrdering = new BundleFileSetOrdering("js");
bundleFileSetOrdering.Files.Add("~/Scripts/modernizr-*");
bundleFileSetOrdering.Files.Add("~/Scripts/json2.js");
bundleFileSetOrdering.Files.Add("~/Scripts/columnizer.js");
bundleFileSetOrdering.Files.Add("~/Scripts/jquery.ui.message.min.js");
bundleFileSetOrdering.Files.Add("~/Scripts/Shared/achievements.js");
bundleFileSetOrdering.Files.Add("~/Scripts/Shared/canvas.js");
bundles.FileSetOrderList.Add(bundleFileSetOrdering);

Sie sollten die Verwendung der Kassette http://getcassette.net/ in Betracht ziehen. Sie unterstützt die automatische Erkennung von Skriptabhängigkeiten basierend auf Skriptreferenzen, die in jeder Datei enthalten sind.

Wenn Sie sich lieber an die MS Web Optimization-Lösung halten, aber die Idee mögen, Skripte basierend auf Skriptreferenzen anzuordnen, sollten Sie meinen Blog-Beitrag unter http://blogs.microsoft.co.il/oric/2013/12/27/building-single lesen -page-application-bundle-orderer /

Die Antwort von @Darin Dimitrov funktioniert perfekt für mich, aber mein Projekt ist in VB geschrieben. Hier ist seine Antwort, die in VB konvertiert wurde

Public Class AsIsBundleOrderer
    Implements IBundleOrderer

    Public Function IBundleOrderer_OrderFiles(ByVal context As BundleContext, ByVal files As IEnumerable(Of FileInfo)) As IEnumerable(Of FileInfo) Implements IBundleOrderer.OrderFiles
        Return files
    End Function
End Class

Um es zu benutzen:

Dim scriptBundleMain = New ScriptBundle("~/Scripts/myBundle")
scriptBundleMain.Orderer = New AsIsBundleOrderer()
scriptBundleMain.Include(
    "~/Scripts/file1.js",
    "~/Scripts/file2.js"
)
bundles.Add(scriptBundleMain)