asp.net - 在 Visual Studio 2017 ASP.NET MVC 中引导之前，Popper 未加载

Question

我正在尝试实现弹出窗口，但似乎 poppers.js 不想在 bootstrap.js 之前加载。我尝试将 bundle 放在 Bootstrap bundle 之前，但它不想加载。 捆绑配置:

public static void RegisterBundles(BundleCollection bundles)
{
    bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
                "~/Scripts/jquery-{version}.js"));

    bundles.Add(new ScriptBundle("~/bundles/jqueryval").Include(
                "~/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 https://modernizr.com to pick only the tests you need.
    bundles.Add(new ScriptBundle("~/bundles/modernizr").Include(
                "~/Scripts/modernizr-*"));

    bundles.Add(new ScriptBundle("~/bundles/popper").Include(
              "~/Scripts/popper.js"
              ));

    bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
              "~/Scripts/bootstrap.js"
              ));

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


}

_布局:

@Scripts.Render("~/bundles/popper")
@Scripts.Render("~/bundles/jquery")
@Scripts.Render("~/bundles/bootstrap")
@RenderSection("scripts", required: false)

我仍然收到此错误:

jQuery.Deferred exception: Bootstrap's tooltips require Popper.js (https://popper.js.org/) Tooltip@http://localhost:56609/Scripts/bootstrap.js:2836:15 Popover@http://localhost:56609/Scripts/bootstrap.js:3509:14 _jQueryInterface/<@http://localhost:56609/Scripts/bootstrap.js:3569:18 each@http://localhost:56609/Scripts/jquery-3.3.1.js:354:10 each@http://localhost:56609/Scripts/jquery-3.3.1.js:189:10 _jQueryInterface@http://localhost:56609/Scripts/bootstrap.js:3559:14 load/http://localhost:56609/:299:46 mightThrow@http://localhost:56609/Scripts/jquery-3.3.1.js:3534:21 resolve/http://localhost:56609/Scripts/jquery-3.3.1.js:3602:12 undefined jquery-3.3.1.js:3818:3 TypeError: Bootstrap's tooltips require Popper.js (https://popper.js.org/)

Answer 1

这个问题困扰了我大约 30 分钟，但我设法解决了它。我所做的只是添加 popper.js 的 UMD 版本，并将其与 bootstrap.js 捆绑在一起。

什么是UMD

The UMD pattern typically attempts to offer compatibility with the most popular script loaders of the day (e.g RequireJS amongst others). In many cases it uses AMD as a base, with special-casing added to handle CommonJS compatibility.

所以你的BundleConfig.cs看起来像这样......

            bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
            "~/Scripts/umd/popper.js",
            "~/Scripts/bootstrap.js"));

我还尝试将其单独捆绑，并且成功了。

        bundles.Add(new ScriptBundle("~/bundles/popper").Include(
                    "~/Scripts/umd/popper.js"));

记住将其添加到您的_Layout.cshtml中。另外，我认为顺序很重要，所以请尝试这个顺序。

    @Scripts.Render("~/bundles/jquery")
    @Scripts.Render("~/bundles/popper")
    @Scripts.Render("~/bundles/bootstrap")
    @RenderSection("scripts", required: false)

所以首先是jQuery，popper，然后是bootstrap。希望这有帮助