在 Visual Studio 2017 ASP.NET MVC 中引导前未加载 Popper

Question

我正在尝试实现弹出窗口，但似乎 poppers.js 不想在 bootstrap.js 之前加载。我试图将包放在引导程序之前，但它不想加载。捆绑配置：

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 异常：Bootstrap 的工具提示需要 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 加载/http ://localhost:56609/:299:46 mayThrow@ 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 的工具提示需要 Popper.js ( https: //popper.js ) js.org/ )

Answer 1

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

什么是UMD

该UMD模式通常会尝试与天最流行的脚本装载机报价兼容性（如RequireJS除其他）。在许多情况下，它使用 AMD 作为基础，并添加了特殊的外壳来处理 CommonJS 兼容性。

所以你的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。希望这可以帮助

Answer 2

我通过添加 bootstrap.bundle.js 来解决，其中包含 popper.js。