Comment puis-je spécifier un ordre d'inclusion ScriptBundle explicite?

J'essaye la fonctionnalité MVC4 System.Web.Optimization 1.0 ScriptBundle .

J'ai la configuration suivante:

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

et la vue suivante:

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

où BundlePaths.CanvasScriptsest "~/bundles/scripts/canvas". Il rend ceci:

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

Jusqu'ici tout va bien, sauf ~/Scripts/Shared/achievements.jsle premier script de la source fournie. Cela dépend de chaque script inclus avant dans le fichier ScriptBundle. Comment puis-je m'assurer qu'il respecte l'ordre dans lequel j'ajoute des instructions d'inclusion à l'ensemble?

Mettre à jour

Il s'agissait d'une application ASP.NET MVC 4 relativement nouvelle, mais elle faisait référence au package de pré-version du framework d'optimisation. Je l'ai supprimé et ajouté le package RTM de http://nuget.org/packages/Microsoft.AspNet.Web.Optimization . Avec la version RTM avec debug = true dans web.config, @Scripts.Render("~/bundles/scripts/canvas")restitue les balises de script individuelles dans le bon ordre.

Avec debug = false dans web.config, le script combiné a d'abord le script réalisations.js, mais comme il s'agit d'une définition de fonction (constructeur d'objet) appelée plus tard, il s'exécute sans erreur. Peut-être que le minificateur est assez intelligent pour comprendre les dépendances?

J'ai également essayé l' IBundleOrdererimplémentation suggérée par Darin Dimitrov avec RTM avec les deux options de débogage et elle s'est comportée de la même manière.

La version minifiée n'est donc pas dans l'ordre que j'attends, mais cela fonctionne.

Je ne vois pas ce comportement sur les bits RTM, utilisez-vous les bits Microsoft ASP.NET Web Optimization Framework 1.0.0: http://nuget.org/packages/Microsoft.AspNet.Web.Optimization ?

J'ai utilisé une reproduction similaire à votre échantillon, basée sur un nouveau site Web d'application Internet MVC4.

J'ai ajouté à BundleConfig.RegisterBundles:

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

Et puis dans la page d'index par défaut, j'ai ajouté:

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

Et j'ai vérifié que dans le javascript minifié du bundle, le contenu de achievement.js était après modernizr ...

Vous pouvez écrire un outil de commande de IBundleOrdererlots personnalisé ( ) qui garantira que les lots sont inclus dans l'ordre dans lequel vous les enregistrez:

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

puis:

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

et à votre avis:

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

Merci Darin. J'ai ajouté une méthode d'extension.

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;
    }
}

Usage

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

Mise à jour de la réponse fournie par SoftLion pour gérer les modifications dans MVC 5 (BundleFile vs FileInfo).

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;
    }
}

Usage:

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

J'aime utiliser une syntaxe fluide, mais cela fonctionne également avec un seul appel de méthode et tous les scripts passés en paramètres.

Vous devriez être en mesure de définir l'ordre à l'aide de BundleCollection.FileSetOrderList. Jetez un œil à ce billet de blog: http://weblogs.asp.net/imranbaloch/archive/2012/09/30/hidden-options-of-asp-net-bundling-and-minification.aspx . Le code de votre instance serait quelque chose comme:

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

Vous devriez envisager d'utiliser Cassette http://getcassette.net/ Il prend en charge la détection automatique des dépendances de script en fonction des références de script trouvées dans chaque fichier.

Si vous préférez vous en tenir à la solution MS Web Optimization mais que vous aimez l'idée d'organiser des scripts basés sur des références de script, vous devriez lire mon article de blog à l' adresse http://blogs.microsoft.co.il/oric/2013/12/27/building-single -page-application-bundle-commande /

La réponse de @Darin Dimitrov fonctionne parfaitement pour moi, mais mon projet est écrit en VB, alors voici sa réponse convertie en VB

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

Pour l'utiliser:

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