指定した順序でバンドルする@ASP.NET

ASP.NETスクリプトをバンドル出来ますが、かゆいところに手が届かない部分があるのでまとめておきます。

通常のバンドル

ASP.NETスクリプトをバンドルするとき下記のように書きます。

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/scripts").Include(
            "~/Scripts/jquery.js",
            "~/Scripts/jquery-ui.js"
            "~/Scripts/bootstrap.js"));    
    }
}

ただし、スクリプトが読み込まれる順番はランダムなので、jquery読み込んだ後にjquery-ui読み込むといったことがデフォルトでは出来ません。
デフォルトでパス追加した順序で読み込んでくれればいいのに!

指定した順序でバンドル

まず、下記のクラスを用意します。

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

続けて、バンドルに読み込みたい順序でスクリプトのパスを追加し、バンドルの順序を指定します。

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        var bundle = new ScriptBundle("~/bundles/scripts")
            .Include("~/Scripts/jquery.js")
            .Include("~/Scripts/jquery-ui.js")
            .Include("~/Scripts/bootstrap.js");
        // バンドルの順序をバンドルにファイルを追加した順序にします
        bundle.Orderer = new AsIsBundleOrderer();
        bundles.Add(bundle);
    }
}

後は画面で読み込めば、指定した順序でスクリプトが読み込まれます。

@using System.Web.Optimization

<head>
    @Scripts.Render("~/bundles/scripts")
</head>