jquery - $ 未定义 - Laravel Jquery 未找到?

标签 jquery laravel webpack laravel-mix

在我的 Laravel 项目(laravel 5.6)中,我从 npm 安装了 Jquery。然后我将其添加到 webpack.mix.js 中。

mix.webpackConfig(webpack => {
    return { plugins: [new webpack.ProvidePlugin({
                $: "jquery",
                jQuery: ["jquery", "$"],
                "window.jQuery": "jquery",
                Popper: ["popper.js", "default"]
            })] };
});

编译 Assets 并尝试使用 jquery 后,它会显示

 "Uncaught ReferenceError: $ is not defined"

在我的 View 中加载混合文件后,我正在使用自定义 JavaScript 文件。

<script src="{{ mix('/js/app.js') }}"></script>
<script type="text/javascript" src="/js/tests/tests.js"></script>

在我的自定义 JavaScript 文件中,我添加了以下代码来检查 Jquery。

$("#myCheckButton").click(function(e) {
  console.log(test);
});

我尝试更改 webpack.min.js webPackconfig 设置,但无法解决问题。大多数像这样的问题建议将自定义 js 文件放在混合之后。我认为我的情况是正确的

编辑:还有另一个错误

jquery-jvectormap.min.js?37ce:1 Uncaught TypeError: Cannot read property 'fn' of undefined
    at eval (jquery-jvectormap.min.js?37ce:1)
    at Object.eval (jquery-jvectormap.min.js?37ce:1)
    at eval (jquery-jvectormap.min.js:6)
    at Object../node_modules/jvectormap/jquery-jvectormap.min.js (app.js?id=3e76ba2082961d8bb73a:654)
    at __webpack_require__ (app.js?id=3e76ba2082961d8bb73a:20)
    at eval (index.js:3)
    at Object../resources/assets/js/vectorMaps/index.js (app.js?id=3e76ba2082961d8bb73a:1820)
    at __webpack_require__ (app.js?id=3e76ba2082961d8bb73a:20)
    at eval (bootstrap.js:9)
    at Object../resources/assets/js/bootstrap.js (app.js?id=3e76ba2082961d8bb73a:1652)

根据此处的要求,这是我的 bootstrap.js 文件

import './masonry';
import './charts';
import './popover';
import './scrollbar';
import './search';
import './sidebar';
import './skycons';
import './vectorMaps';
import './chat';
import './datatable';
import './datepicker';
import './email';
import './fullcalendar';
import './googleMaps';
import './utils';
import './sweetalert2';
import './select2';

最佳答案

将其放在 resources\assets\js\app.js 文件顶部附近。

import $ from 'jquery';
window.jQuery = $;
window.$ = $;

来源:

https://github.com/webpack/webpack/issues/4258#issuecomment-340240162

关于jquery - $ 未定义 - Laravel Jquery 未找到?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52459058/

相关文章:

jquery - 当悬停另一个元素时,如何从一个元素中删除框阴影效果?

javascript - 如何使用 Webpack 将所有导入的依赖项打包到一个文件中?

vue.js - Vue 3 和 webpack 5 - 错误 : "module property was removed from Dependency"

javascript - jquery 变量似乎在第一次单击后永远不会被设置

jquery - 使用多个 ajax 调用成功填充 html 表

laravel - 如何从 Axios GET 请求的 url 获取参数?

jquery - 提高 Ajax 请求性能以加载 DataTable 中的数百万条记录

php - Laravel 应用程序 key - 它是什么以及它如何工作?

javascript - Babeljs 中的 "loose"是什么意思?

javascript - 如何在点击时在真/假之间切换