91

MVC4 System.Web.Optimization1.0ScriptBundle機能を試しています。

私は次の構成を持っています：

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。includeステートメントをバンドルに追加する順序を確実に順守するにはどうすればよいですか？

アップデート

これは比較的新しいASP.NETMVC4アプリケーションでしたが、最適化フレームワークのプレリリースパッケージを参照していました。それを削除し、 http：//nuget.org/packages/Microsoft.AspNet.Web.OptimizationからRTMパッケージを追加しました。web.configでdebug=trueのRTMバージョンを使用すると@Scripts.Render("~/bundles/scripts/canvas")、個々のスクリプトタグが正しい順序でレンダリングされます。

web.configでdebug=falseを指定すると、結合されたスクリプトには最初にachievements.jsスクリプトが含まれますが、後で呼び出される関数定義（オブジェクトコンストラクター）であるため、エラーなしで実行されます。おそらく、ミニファイアは依存関係を理解するのに十分賢いですか？

IBundleOrdererまた、Darin Dimitrovが両方のデバッグオプションを使用してRTMで提案した実装を試しましたが、同じように動作しました。

したがって、縮小版は私が期待する順序ではありませんが、機能します。

4

7 に答える 7

116

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")
于 2012-08-16T05:40:57.497 に答える
52

ダリンありがとう。拡張メソッドを追加しました。

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());
于 2013-05-08T09:44:50.383 に答える
47

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

私は流暢な構文を使用するのが好きですが、単一のメソッド呼び出しとパラメーターとして渡されるすべてのスクリプトでも機能します。

于 2014-03-26T04:12:31.957 に答える
18

RTMビットでこの動作が見られません。MicrosoftASP.NETWeb最適化フレームワーク1.0.0ビットを使用していますか：http：//nuget.org/packages/Microsoft.AspNet.Web.Optimization？

新しいMVC4インターネットアプリケーションWebサイトに基づいて、サンプルと同様の再現を使用しました。

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で、achievements.jsのコンテンツがmodernizrの後にあることを確認しました...

于 2012-08-16T21:47:14.680 に答える
5

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);
于 2013-06-17T10:16:48.380 に答える
1

@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)
于 2013-06-18T21:15:06.337 に答える
1

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

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

于 2014-01-02T13:11:41.340 に答える