为什么我的捆绑包即使已包含在 BundlesConfig 中也未加载？

Question

我有 jQuery、Bootstrap 包我想在我的视图中加载，我已将它们添加到我的 bundlesconfig 并将其添加到我在 @script.render 的视图中，但是我的脚本文件显然没有呈现，因为我什至无法使用 bootstrap 标签。

捆绑包

using System.Web;
using System.Web.Optimization;

namespace XXXX
{
    public class BundleConfig
    {
        // For more information on Bundling, visit http://go.microsoft.com/fwlink/?LinkId=254725
        public static void RegisterBundles(BundleCollection bundles)
        {
            bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                        "~/Scripts/jquery-{version}.js",
                        "~/Scripts/bootstrap.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryui").Include(
                        "~/Scripts/jquery-ui-{version}.js"));

            bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                        "~/Scripts/jquery.unobtrusive*",
                        "~/Scripts/jquery.validate*"));

            // Use the development version of Modernizr to develop with and learn from. Then, when you're
            // ready for production, use the build tool at http://modernizr.com to pick only the tests you need.
            bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                        "~/Scripts/modernizr-*"));

            bundles.Add(new StyleBundle("~/Content/css").Include(
                "~/Content/site.css",
                "~/Content/bootstrap.css"));

            bundles.Add(new StyleBundle("~/Content/themes/base/css").Include(
                        "~/Content/themes/base/jquery.ui.core.css",
                        "~/Content/themes/base/jquery.ui.resizable.css",
                        "~/Content/themes/base/jquery.ui.selectable.css",
                        "~/Content/themes/base/jquery.ui.accordion.css",
                        "~/Content/themes/base/jquery.ui.autocomplete.css",
                        "~/Content/themes/base/jquery.ui.button.css",
                        "~/Content/themes/base/jquery.ui.dialog.css",
                        "~/Content/themes/base/jquery.ui.slider.css",
                        "~/Content/themes/base/jquery.ui.tabs.css",
                        "~/Content/themes/base/jquery.ui.datepicker.css",
                        "~/Content/themes/base/jquery.ui.progressbar.css",
                        "~/Content/themes/base/jquery.ui.theme.css"));
        }
    }
}

_Layout.cshtml

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>@ViewBag.Title</title>
    @Styles.Render("~/Content/css")
    @Scripts.Render("~/bundles/modernizr")
</head>
    <body>
        <div>
            <p>This is a test</p>
        </div>
        @RenderBody()

        @Scripts.Render("~/bundles/jquery")
        @RenderSection("scripts", required: false)
    </body>
</html>

查看

@{
    ViewBag.Title = "Search";
    Layout = "~/Views/Shared/_Layout.cshtml";
}

<div class="jumbotron">
    <div class="container">
        <h1>Find</h1>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">Go!</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

渲染HTML

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>Search</title>


</head>
<body>
    <div>


<div class="jumbotron">
    <div class="container">
        <h1>Find</h1>
        <div class="row">
            <div class="col-lg-6">
                <div class="input-group">
                    <input type="text" class="form-control" placeholder="Search for...">
                    <span class="input-group-btn">
                        <button class="btn btn-primary" type="button">Go!</button>
                    </span>
                </div>
            </div>
        </div>
    </div>
</div>

    </div>
</body>
</html>

Answer 1

重要的是要注意 Bundle 和 Minification 是不同的过程。 ASP.Net 网站将其解释为：捆绑捆绑是 ASP.NET 4.5 中的一项新功能，可以轻松地将多个文件合并或捆绑到一个文件中。您可以创建 CSS、JavaScript 和其他捆绑包。更少的文件意味着更少的 HTTP 请求，这可以提高首页加载性能。缩小 Minification 对脚本或 css 执行各种不同的代码优化，例如删除不必要的白色 space 和注释以及将变量名称缩短为一个字符。考虑以下 JavaScript 函数。

返回您的 question:ASP.Net MVC 4 Bundles 有忽略列表。和.min 扩展名包含在忽略列表中。要覆盖忽略列表：

bundles.IgnoreList.Clear();

为什么我的捆绑包即使已包含在 BundlesConfig 中也未加载？

Why are my bundles not loaded even when they have been included in the BundlesConfig?

c#

asp.net-mvc

bundle

twitter-bootstrap

bundling-and-minification