मैं एक स्पष्ट स्क्रिप्टबंडल को ऑर्डर कैसे निर्दिष्ट कर सकता हूं?

Question

मैं MVC4 System.Web.Optimization 1.0 ScriptBundle feature को आजमा रहा हूं।

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" है

मैं निम्नलिखित विन्यास है। यह इस renders:

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

अब तक तो अच्छा, ~/Scripts/Shared/achievements.js छोड़कर बंडल स्रोत में पहली स्क्रिप्ट है। यह ScriptBundle में इससे पहले शामिल प्रत्येक स्क्रिप्ट पर निर्भर करता है। मैं कैसे सुनिश्चित कर सकता हूं कि जिस क्रम में मैं जोड़ता हूं उसे बंडल में बयान शामिल है?

अद्यतन

यह एक अपेक्षाकृत नया ASP.NET MVC 4 आवेदन था, लेकिन यह अनुकूलन ढांचा पूर्व रिहाई पैकेज को संदर्भित किया गया था। मैंने इसे हटा दिया और http://nuget.org/packages/Microsoft.AspNet.Web.Optimization से आरटीएम पैकेज जोड़ा। Web.config में डीबग = सत्य के साथ आरटीएम संस्करण के साथ, @Scripts.Render("~/bundles/scripts/canvas") सही क्रम में व्यक्तिगत स्क्रिप्ट टैग प्रस्तुत करता है।

web.config में डीबग = झूठी के साथ, संयुक्त स्क्रिप्ट में achievements.js स्क्रिप्ट पहले होती है, लेकिन चूंकि इसकी फ़ंक्शन परिभाषा (ऑब्जेक्ट कन्स्ट्रक्टर) जिसे बाद में कहा जाता है, यह बिना त्रुटि के चलाता है। शायद minifier निर्भरता को समझने के लिए पर्याप्त स्मार्ट है?

मैंने IBundleOrderer कार्यान्वयन की भी कोशिश की कि डारिन डिमिट्रोव ने दोनों डीबग विकल्पों के साथ आरटीएम के साथ सुझाव दिया और यह वही व्यवहार किया।

तो छोटा संस्करण मैं अपेक्षा करता हूं कि आदेश में नहीं है, लेकिन यह काम करता है।

Answer 1

मैं आरटीएम बिट्स पर यह व्यवहार नहीं देख रहा हूं, क्या आप एमआई का उपयोग कर रहे हैं क्रॉसॉफ्ट एएसपी.नेट वेब अनुकूलन फ्रेमवर्क 1.0.0 बिट्स: http://nuget.org/packages/Microsoft.AspNet.Web.Optimization?

मैंने एक नई एमवीसी 4 इंटरनेट एप्लिकेशन वेबसाइट के आधार पर आपके नमूने के लिए एक समान रेपो का उपयोग किया।

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

और फिर डिफ़ॉल्ट अनुक्रमणिका पृष्ठ में, मैं कहा::

मैं BundleConfig.RegisterBundles को जोड़ा गया

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

और मैं बंडल, सामग्री के लिए सत्यापित है कि न्यूनतम किया जावास्क्रिप्ट में achievements.js के आधुनिकीकरण के बाद था ...

Answer 2

आप एक कस्टम बंडल orderer (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") 

Answer 3

धन्यवाद डारिन। मैंने एक विस्तार विधि जोड़ा है।

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

Answer 4

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

Answer 5

@Darin दिमित्रोव का जवाब मेरे लिए पूरी तरह से काम करता है, लेकिन मेरी परियोजना 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 

VB के लिए उपयोग करने के लिए परिवर्तित है यह:

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

Answer 6

आप कैसेट http://getcassette.net/ का उपयोग कर यह प्रत्येक फ़ाइल के अंदर पाया स्क्रिप्ट संदर्भ के आधार पर स्क्रिप्ट निर्भरता ऑटो का पता लगाने का समर्थन करता है पर विचार करना चाहिए।

आप एमएस वेब अनुकूलन समाधान के लिए, लेकिन स्क्रिप्ट संदर्भ के आधार पर स्क्रिप्ट की व्यवस्था करने के विचार आप http://blogs.microsoft.co.il/oric/2013/12/27/building-single-page-application-bundle-orderer/

Answer 7

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

मैं धाराप्रवाह सिंटैक्स का उपयोग पसंद है, लेकिन यह भी एक ही विधि कॉल और सभी लिपियों पैरामीटर के रूप में पारित कर दिया साथ काम करता है।