ฉันจะระบุคำสั่งรวม ScriptBundle ที่ชัดเจนได้อย่างไร

ฉันพยายามออกคุณลักษณะ ScriptBundle MVC4 System.Web.Optimization 1.0

ฉันมีการกำหนดค่าต่อไปนี้:

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

และมุมมองต่อไปนี้:

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

ที่เป็นBundlePaths.CanvasScripts "~/bundles/scripts/canvas"มันทำให้สิ่งนี้:

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

จนถึงตอนนี้ดีมากยกเว้น~/Scripts/Shared/achievements.jsเป็นสคริปต์แรกในซอร์สที่รวม ขึ้นอยู่กับทุกสคริปต์ที่รวมอยู่ก่อนหน้านั้นในไฟล์ScriptBundle. ฉันจะมั่นใจได้อย่างไรว่าจะเป็นไปตามลำดับที่ฉันเพิ่มคำสั่งรวมลงในชุด

อัปเดต

นี่เป็นแอปพลิเคชัน ASP.NET MVC 4 ที่ค่อนข้างใหม่ แต่กำลังอ้างอิงถึงแพ็คเกจก่อนวางจำหน่ายของเฟรมเวิร์กการเพิ่มประสิทธิภาพ ฉันลบมันและเพิ่มแพคเกจ RTM จากhttp://nuget.org/packages/Microsoft.AspNet.Web.Optimization ด้วยเวอร์ชัน RTM ที่มี debug = true ใน web.config@Scripts.Render("~/bundles/scripts/canvas")แสดงแท็กสคริปต์แต่ละแท็กตามลำดับที่ถูกต้อง

ด้วย debug = false ใน web.config สคริปต์ที่รวมจะมีสคริปต์ successments.js ก่อน แต่เนื่องจากเป็นนิยามฟังก์ชัน (ตัวสร้างวัตถุ) ที่เรียกในภายหลังจึงทำงานโดยไม่มีข้อผิดพลาด บางที minifier อาจฉลาดพอที่จะคิดหาการอ้างอิง?

ฉันยังลอง IBundleOrdererใช้งานที่ Darin Dimitrov แนะนำกับ RTM ด้วยตัวเลือกการดีบักทั้งสองตัวและมันก็ทำงานเหมือนกัน

ดังนั้นเวอร์ชันที่ลดขนาดจึงไม่อยู่ในลำดับที่ฉันคาดหวัง แต่ใช้งานได้

ฉันไม่เห็นพฤติกรรมนี้บนบิต RTM คุณกำลังใช้ Microsoft ASP.NET Web Optimization Framework 1.0.0 บิต: http://nuget.org/packages/Microsoft.AspNet.Web.Optimizationหรือไม่

ฉันใช้คำซ้ำที่คล้ายกันกับตัวอย่างของคุณโดยอ้างอิงจากเว็บไซต์แอปพลิเคชันอินเทอร์เน็ต MVC4 ใหม่

ฉันเพิ่มไปยัง 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); 

จากนั้นในหน้าดัชนีเริ่มต้นฉันเพิ่ม:

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

และฉันตรวจสอบแล้วว่าใน javascript ที่ย่อขนาดสำหรับบันเดิลนั้นเนื้อหาของ successments.js อยู่หลังจาก modernizr ...

คุณสามารถเขียนตัวกำหนดบันเดิลที่กำหนดเอง ( IBundleOrderer) เพื่อให้แน่ใจว่าบันเดิลรวมอยู่ในลำดับที่คุณลงทะเบียนไว้:

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

แล้ว:

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

และในมุมมองของคุณ:

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

ขอบคุณดาริน ฉันได้เพิ่มวิธีการขยายแล้ว

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

การใช้งาน

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

อัปเดตคำตอบโดย SoftLion เพื่อจัดการกับการเปลี่ยนแปลงใน MVC 5 (BundleFile เทียบกับ 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;
    }
}

การใช้งาน:

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

ฉันชอบใช้ไวยากรณ์ที่คล่องแคล่ว แต่ก็ใช้ได้กับการเรียกวิธีเดียวและสคริปต์ทั้งหมดส่งผ่านเป็นพารามิเตอร์

คุณควรจะตั้งค่าลำดับได้ด้วยความช่วยเหลือของ BundleCollection.FileSetOrderList มีลักษณะที่โพสต์บล็อกนี้: http://weblogs.asp.net/imranbaloch/archive/2012/09/30/hidden-options-of-asp-net-bundling-and-minification.aspx โค้ดในอินสแตนซ์ของคุณจะเป็นดังนี้:

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

คุณควรพิจารณาใช้ Cassette http://getcassette.net/ซึ่งสนับสนุนการตรวจหาการอ้างอิงสคริปต์โดยอัตโนมัติตามการอ้างอิงสคริปต์ที่พบในแต่ละไฟล์

หากคุณต้องการใช้โซลูชัน MS Web Optimization แต่ชอบแนวคิดในการจัดเรียงสคริปต์ตามการอ้างอิงสคริปต์คุณควรอ่านโพสต์บล็อกของฉันที่http://blogs.microsoft.co.il/oric/2013/12/27/building-single -page-application-bundle-orderer /

คำตอบของ @Darin Dimitrov ทำงานได้ดีสำหรับฉัน แต่โครงการของฉันเขียนด้วย VB ดังนั้นนี่คือคำตอบของเขาที่แปลงเป็น 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

วิธีใช้:

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