Laravel Mix Webpack - Bootstrap 4.1 链接 API 到隐藏 jQuery

Question

我在我的项目中使用 Laravel Mix，我正在使用 Bootstrap 4.1.1。使用以下代码加载库：

_{bootstrap.js （最初由Laravel项目生成，用于加载库）}

//...
try {
    window.$ = window.jQuery = require('jquery/dist/jquery.min');

    require('bootstrap');
} catch (e) {
    console.log(e);
}
//...

所以我只是尝试触发一个模态并发现了这个：VM3990:1 Uncaught TypeError: $(...).modal is not a function。然后我检查了 window.$.fn，但找不到任何 Bootstrap 定义的函数。

好奇，于是我继续使用断点调试打包后的JS文件。在 Bootstrap 为 imported/required 的部分中， $$ 的实例（对 jQuery 的本地引用）包含所有方法。请看下图：

我怀疑 Bootstrap 给自己加载了一个单独的 jQuery 实例，我发现这是真的。 jQuery 的实例加载了 isGlobal == false，因此它没有像 $/jQuery 那样暴露给 window。当我删除我加载我的 jQuery 的行时，Bootstrap 仍然加载并且如果它们不是由我的代码触发，则仍然可以使用下拉菜单。

图像中的箭头指向文件中的 jQuery 部分。

我不太了解 webpack，但是以前有人遇到过这个问题吗？我刚刚开始学习如何使用它和模块，所以我可能会做一些我不应该做的事情。

Answer 1

编辑您的/resources/assets/js/boostrap.js：

try {
    window.$ = window.jQuery = require('jquery');

    require('bootstrap');
} catch (e) {}

这将需要 node_modules 文件夹中的 jquery 模块。

Laravel Mix Webpack - Bootstrap 4.1 链接 API 到隐藏 jQuery

Laravel Mix Webpack - Bootstrap 4.1 links API to hidden jQuery

jquery

twitter-bootstrap

laravel

webpack

laravel-mix