web-dev-qa-db-ja.com

ASP.NetMVCバンドルにjavascriptファイルを特定の順序でレンダリングするように強制します

ASP.Net MVC 4アプリケーションに取り組んでおり、バンドルとミニフィクションを使用してスタイルとスクリプトファイルをレンダリングしています。

使用しているときに、別のファイル(ファイルB)で関数を呼び出すスクリプトファイル(ファイルA)があります
@Scripts.Render()メソッドは、ファイルAの前にファイルBlinkタグをレンダリングするため、エラーとスクリプトが発生します。正しく動作しません。

ファイルごとに個別のバンドルを使用せずに、@Script.Render()linkタグを特定の順序でレンダリングさせる方法はありますか????

[〜#〜]編集[〜#〜]

IncludeDirectoryメソッドを使用して、そのフォルダー内のすべてのスクリプトファイルを含めています

public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/js").IncludeDirectory(
                    "~/Scripts/js",
                    "*.js"));
    }
}
15
Amir Ismail

独自の注文者をDarin Dimitrovとしてこの質問に答えてください: 明示的なScriptBundleインクルード順序を指定するにはどうすればよいですか?

public class MyBundleOrderer : IBundleOrderer
{
    public virtual IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        //any ordering logic here

        return files;
    }
}
6
webdeveloper

デフォルトでバンドルすると、スクリプトがアルファベット順に追加されます。 willは既知のライブラリを移動し、正しい順序で追加します(たとえば、jQueryを最初に配置し、次にjQuery-uiを配置します)。

最も簡単な方法は、スクリプトを自分で注文することです。 1つの方法は、カスタムスクリプトを別のフォルダーに移動してから、すべてのスクリプトを必要な順序で独自のバンドルに追加することです。

_public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {
        bundles.Add(new ScriptBundle("~/bundles/js").IncludeDirectory(
                    "~/Scripts/js","*.js"));

        bundles.Add(new ScriptBundle("~/bundles/myScripts").Include(
            "~/Scripts/custom/scriptB.js",
            "~/Scripts/custom/scriptA.js"));
    }
}
_

もう1つのオプションはワイルドカードです。このオプションには、カスタムスクリプトを独自のフォルダーに移動することも含まれますが、バンドルは1つだけです( ソース ):*

_public class BundleConfig
{
    public static void RegisterBundles(BundleCollection bundles)
    {       
        bundles.Add(new ScriptBundle("~/bundles/js").Include(
            "~/Scripts/*.js",
            "~/Scripts/custom/scriptB.js",
            "~/Scripts/custom/scriptA.js"));
    }
}
_

また、「ファイルごとに個別のバンドルを使用せずに、@Script.Render()linkタグを特定の順序でレンダリングさせる方法はありますか」-個別のリンクタグはデバッグでのみ発生することに注意してくださいモード。リリースモードでデプロイすると、リンクタグとファイルは1つだけになります。

9
MikeSmithDev

バンドルされたファイルの順序については、BundleCollection.FileSetOrderListを参照してください。私はそれについてこのブログ投稿を見つけました: http://weblogs.asp.net/imranbaloch/archive/2012/09/30/hidden-options-of-asp-net-bundling-and-minification.aspx これはかなり良い説明です。

JQueryの順序付けのサンプルコード:

BundleFileSetOrdering bundleFileSetOrdering1 = new BundleFileSetOrdering("jquery");
bundleFileSetOrdering1.Files.Add("jquery.js");
bundleFileSetOrdering1.Files.Add("jquery-min.js");
bundleFileSetOrdering1.Files.Add("jquery-*");
bundleFileSetOrdering1.Files.Add("jquery-ui*");
bundleFileSetOrdering1.Files.Add("jquery.ui*");
bundleFileSetOrdering1.Files.Add("jquery.unobtrusive*");
bundleFileSetOrdering1.Files.Add("jquery.validate*");
bundles.FileSetOrderList.Add(bundleFileSetOrdering1);
1

カセットの使用を検討する必要があります http://getcassette.net/ 各ファイル内にあるスクリプト参照に基づくスクリプト依存関係の自動検出をサポートします。

MS Web最適化ソリューションに固執することを好むが、スクリプト参照に基づいてスクリプトを配置するというアイデアが好きな場合は、私の投稿ブログを読む必要があります http://blogs.Microsoft.co.il/oric/2013/12/27/building-single-page-application-bundle-orderer /

0
Ori Calvo