Javascript 引导4-。模式不是一个函数

我在引导过程中使用纯Javascript，并且得到了这个错误。我看了很多不同的问题，似乎没有一个适合我。我用npm下载了Jquery、Popper和Bootstrap，并在我的身体底部添加了min脚本：

<div id="success-delete" class="modal fade" role="dialog">
      <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal">&times;</button>
            <h4 class="modal-title">Success!</h4>
          </div>
          <div class="modal-body">
            <p>Template successfully deleted.</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
          </div>
        </div>

      </div>
    </div>

    <script src="/js/jquery.min.js" defer></script>
    <script src="/js/popper.min.js" defer></script>
    <script src="/js/bootstrap.min.js" defer></script>
    <script src="/js/template-section.js" defer></script>

我还尝试将模式选项更改为{show:true}，但这不起作用。打印出this.successModal为我提供了正确的元素，但它似乎没有modal函数

编辑：我还知道一个事实，bootstrap.min.js文件中包含了modals——我尝试通过点击按钮激活modals，效果很好。让javascript识别出问题所在的模式

---

编辑2：修正！请参阅下面的答案。

使用

$（“#成功删除”）

而不是documentSelector中声明的对象进行修复。不太清楚为什么，但它起作用了

尝试使用CDN加载Jquery和引导库，谢谢您的回复。我会这么做的，但我了解到，从长远来看，这并没有那么快或可扩展。。。我专门使用npm，以便在开发环境中与其他模块保持引导。我只是一时兴起尝试了一下，但没有成功：（“谢谢你的回复。我会这么做的，但我了解到，从长远来看，这没有那么快或可扩展性。”实际上是另一种方式，这是CDN的全部要点，我建议你研究这个主题。我说，请打开你的浏览器调试工具，检查网络选项卡中的文件是否正确加载。他们是否正确加载，谢谢。我没有意识到CDN更快。我本以为我研究过这个主题，但我猜测还不够。知道JS为什么不起作用吗？Bootstrap的模式是一个jQuery插件，因此尝试在

文档中调用它。querySelector

返回的内容将不起作用。如果对从

$（“#success delete”）获得的每个对象使用
控制台.log（）
）

和

document.querySelector

，您将看到它们的区别。如果您想使用

this.successModal

，您可以将其包装在jquery函数中，如下所示：

$（this.successModal.modal（'show'）；

/* template-section.js */
class TemplateSection {
    constructor(...) {
        ...
        this.successModal = document.querySelector('#success-delete');
    }

    _removeTemplate(e) {
        const success = this.deleteCallback(e.currentTarget.previousSibling.getAttribute('src'));
        if (success) {
            this.container.removeChild(e.currentTarget.parentNode);
            this.successModal.modal('show');
        } else {
            // do something
        }
     }

 }