从 Webpack bundle.js 获取/导入 bootstrap.js

Posted 2023-02-22

【中文标题】从 Webpack bundle.js 获取/导入 bootstrap.js

【英文标题】：Get/import bootstrap.js from Webpack bundle.js

【发布时间】：2019-06-06 10:55:45

【问题描述】：

对不起，我没有使用 webpack 的经验。

我有一个使用 Webpack 生成的模板页面。

页面显示带有 bootstrap.js 的模式对话框

bundle.js 中包含的 bootstrap.js

我需要模式窗口的显示/隐藏/侦听事件，但我不能使用 $('#dialog').modal('hide') 因为没有加载引导程序（在当前上下文中？）

如何在 bundle.js 中导入/获取对 bootstrap.js 的访问权限？

Examples - try to close modal with button "Close with JS"

Sample #1 used bootstrap.js from bundle.js

错误

$(...).modal 不是函数

Sample #2 used bootstrap.js from bundle.js and in html

错误

未删除模态背景淡入淡出

导入设置

【问题讨论】：

您是如何将引导程序包含到您的项目中的？您可以在index.js 或app.js 上简单地import 'bootstrap';。

@SlavaUtesinov codepen.io/AlexandrM/pen/QzJqgz 不包括 bootsrap.js codepen.io/AlexandrM/pen/xmQXYE 包括 bootsrap.js

@AlexandrSulimov 你能告诉我们你的 html 和 js 代码吗？

@MM 是的，有问题的样品。 codepen.io/AlexandrM/pen/QzJqgz 不包括 bootsrap.js codepen.io/AlexandrM/pen/xmQXYE 包括 bootsrap.js

@AlexandrSulimov 我看过 codepen 示例。我所说的 html/js 代码是指完整的代码，包括您通过下载库或通过 cdn 导入引导程序的部分。我在 codepen 链接中找不到任何关于引导程序的内容。请原谅我，但我不确定 codepen 导入是如何工作的。

【参考方案1】：

我只是检查了您的 codepen 示例，并以某种方式在您的两个示例中生成了 2 个模态背景。 （有或没有引导程序）

当另一个关闭时，其中一个保留在页面上。

我只是检查引导程序上是否有一些错误或其他任何东西，并在 github 上遇到已关闭的问题；

https://github.com/twbs/bootstrap/issues/679

不知何故，有些人也面临着你的问题，并且是由许多问题引起的。

您可以在使用引导示例的快捷方式解决方案中手动删除第二个背景。

更新：

经过Alexandr Sulimov的反馈，我又重新搜索了一下，发现***上的一个主题有类似的问题；

How to hide Bootstrap modal from javascript?

我在 with bootstrap codepen 示例上对其进行了测试，效果很好

$("[data-dismiss=modal]").trigger( type: "click" );

@Alexandr，你能试试下面的代码吗，据我所知，只是用 TAG 模拟结束；

$(function()
   $('#closeWithJS').on('click', function()
       $("[data-dismiss=modal]").trigger( type: "click" );
   );
);

【讨论】：

当我移除第二个背景时 - 模式对话框未显示按钮“为 @mdo 打开模式”clip2net.com/s/3Zd6xT8

@AlexandrSulimov 我会根据您的反馈更新我的答案

谢谢，是的，它的解决方案是有效的。如果在 2 天内不回答，我将您的回答标记为赏金回答。我寻求一个问题的答案“我如何在 bundle.js 中导入/访问 bootstrap.js？”因为我想使用常用代码“.modal('hide')”和 bootstrap.js 的一个实例

告诉我，您是否在 index.html 的标头中手动添加了 bootstrap.js 脚本文件？如果是，您可以指导：getbootstrap.com/docs/4.0/getting-started/webpack

或者这可能对你有帮助； medium.com/commencis/…