Javascript 如何在Visual Studio 2019本地安装Popper

我正在尝试在VisualStudio2019中安装popper.js。我正在用MVC制作一个.NET核心应用程序。 在我的一个视图中，我需要使用bootstrap中的下拉菜单，所以我需要包括Popper。当我使用带有CDN链接的

标记时，它工作正常。问题是这个应用程序将被托管在一个私有网络上。因此，我不确定使用该应用程序的计算机是否能够连接到互联网

所以我想在本地安装这些文件，我尝试使用VisualStudio的lib管理器，并安装了popper。js@2.4.1

但是当我试图在我的项目中包含文件时，它不起作用。我在popper.js文件夹中有3个子文件夹：cjs、esm和umd。在Popper的网页上，它说使用

标签的是umd。因此，我尝试在我的html中包含此引用：

但是我的下拉菜单还是不起作用。有什么我做错了吗？有没有其他安装波普尔的方法

（我认为html中引用的顺序是正确的：jquery.js、popper.js、bootstrap.js）

下拉列表构建在第三方库Popper.js上，该库提供动态定位和视口检测。确保在引导的JavaScript之前包含popper.min.js，或者使用包含popper.js的

Bootstrap.bundle.min.js/Bootstrap.bundle.js

。虽然不需要动态定位，但Popper.js不用于在导航栏中定位下拉列表

我发现在我的

共享布局.cshtml

，

中包含以下脚本：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

然后我将bootstrap.js添加到

，如下所示：

<script src="~/lib/jquery/dist/jquery.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/js/site.js" asp-append-version="true"></script>

然后可以在视图中使用下拉列表。 下面是一个演示：

视图：

TestDropDownList
下拉按钮

结果:

---

好的，谢谢，这很有效。但是，如果我同时包含

bootstrap.bundle.js

和

bootstrap.js

，那么我似乎必须在下拉列表上单击两次才能激活它。但是，如果我只留下

bootstrap.bundle.js

，它会工作得很好。

<h1>TestDropDownList</h1>
<div>
    <div class="dropdown">
        <button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown button
        </button>
        <div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
    <div class="dropdown show">
        <a class="btn btn-secondary dropdown-toggle" href="#" role="button" id="dropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            Dropdown link
        </a>

        <div class="dropdown-menu" aria-labelledby="dropdownMenuLink">
            <a class="dropdown-item" href="#">Action</a>
            <a class="dropdown-item" href="#">Another action</a>
            <a class="dropdown-item" href="#">Something else here</a>
        </div>
    </div>
</div>