代码之家 › 专栏 › 技术社区 › Daniel Cheung

Laravel Mix Webpack-引导4.1将API链接到隐藏的jquery

laravel-mix webpack laravel twitter-bootstrap jquery

Daniel Cheung · 技术社区 · 6 年前

我在我的项目中使用了LaravelMix,并且使用了引导4.1.1。使用以下代码加载库:

_{引导程序.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 我找不到任何引导程序定义的函数。

$$$1 (对jquery的本地引用)包含所有方法。请参见下图:

我怀疑引导程序自己加载了一个单独的jquery实例,我发现这是真的。jquery的那个实例加载了 isGlobal == false 所以它没有暴露在 window 作为 $ / jQuery 。当我删除了加载jquery的行时,引导程序仍然被加载,如果下拉列表不是由我的代码触发的,那么它们仍然可以被使用。

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

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

1 回复 | 直到 6 年前

LukáÅ¡ Irsák marcanuy 6 年前

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

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

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

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

推荐文章

Guillaume Harari · 根据开发或产品环境加载css

6 年前

Max Silva · 无法使用vuejs2和webpack嵌入自定义字体

6 年前

Fered · Npm、Dev dependecy或dependecy,当使用webpack等将所有内容打包到一个脚本中时?

6 年前

Carlo · 如何使用Webpack 4仅在某些模块中导入jQuery?

6 年前

zh-mskl9 · Pug+Web包开发服务器

6 年前

Mizlul · 无法解析“css加载程序!”!自动刷新器加载程序'

6 年前

Aleksandr Gvozdev · 模拟'fs。readdirSync`节点。无递归的js

6 年前

jonnyg · 如何在docker文件中获取我可用的docker环境变量?(使用React/JS/webpack)

6 年前

Boris K · 将Extract Text Webpack插件与Vue CLI 3配合使用

6 年前

IsraGab · 使用webpack从angularjs模块加载特定指令

6 年前