logo标签列表

Laravel 5 WebPack JQuery - $ is not defined

jquerylaravellaravel-5webpacklaravel-5.6
9

我有webpack.min.js：

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

mix.sass('resources/assets/styles/index.scss', 'public/css/app.css')
    .js('resources/assets/scripts/index.js', 'public/js/app.js')
    .copyDirectory('resources/assets/static', 'public/static')
    .version()
    .sourceMaps();

还有package.json：

"devDependencies": {
    "jquery": "^3.3.1",
    "axios": "^0.18.0",
    "bootstrap": "^4.1.3",
    "bootstrap-datepicker": "^1.7.1",
    "browser-sync": "^2.24.6",
    "browser-sync-webpack-plugin": "^2.0.1",
    "chart.js": "^2.7.2",
    "cross-env": "^5.2.0",
    "datatables": "^1.10.18",
    "easy-pie-chart": "^2.1.7",
    "font-awesome": "4.7.0",
    "fullcalendar": "^3.9.0",
    "jquery-sparkline": "^2.4.0",
    "jvectormap": "^2.0.4",
    "laravel-mix": "^2.1.11",
    "load-google-maps-api": "^1.2.0",
    "lodash": "^4.17.10",
    "masonry-layout": "^4.2.2",
    "perfect-scrollbar": "^1.1.0",
    "popper.js": "^1.14.3",
    "skycons": "^1.0.0",
    "vue": "^2.5.16"
  }

在我的刀片页脚脚本中：
@section('footer')
    <script type="text/javascript">
        if (typeof jQuery != 'undefined') { alert(jQuery.fn.jquery); }

        $(function() {
        $('#cc-number').validateCreditCard(function(result) {
            $('.log').html('Card type: ' + (result.card_type == null ? '-' : result.card_type.name)
                + '<br>Valid: ' + result.valid
                + '<br>Length valid: ' + result.length_valid
                + '<br>Luhn valid: ' + result.luhn_valid);
        });
        });
    </script>
@endsection

在运行npm run dev并加载页面后，我收到以下错误信息：

未捕获的引用错误：$未定义

而我的alert(jQuery.fn.jquery);没有触发。我该如何从npm中加载jquery，以便我可以在blade模板的内联html代码中使用它？
4个回答
27
2
defer 是用来做什么的？ - Pathros
1
defer 的意思是脚本只有在其他所有内容都加载完成后才会被加载。 - O.S.Kaya
1
在浪费了半天时间寻找解决方案后，终于来到这里。谢谢，它完美地运行了。 - sohal07
23

在您的main.js文件中尝试以下内容

global.$ = global.jQuery = require('jquery');
主JS文件是哪个？在这里：resources/assets/scripts/index.js？ - AnD
无论如何，在resources/assets/scripts/index.js中添加global.$ = global.jQuery = require('jquery');可以解决这个问题 - 谢谢！ - AnD
8
对于其他使用 Laravel 5.8 找到这个主题的人：如果你在 app.blade.php 中有一个 <script src="{{ asset('js/app.js') }}" defer></script> 标签，只需将其移动到页面底部的 body 标签中，并删除 defer 声明。这应该能够解决问题并与 vue.js 完美兼容。 - Martin
被低估的解决方案。我花了数小时在我的JS文件中添加windows.$ =...，但在blade中仍然无法使用。这个方法解决了我的问题。 - TrueStory
10

我在使用 Laravel 5.7 中的一些默认视图时遇到了这个问题。 我试图在一些扩展默认layout/app.blade.php模板的blade视图模板中使用JavaScript（需要使用jQuery）。

但对我来说，问题并不是window.$没有被分配给window.jQuery库，因为它在resources/js/bootstrap.js文件中被添加。 （这是一个似乎已经预编译为Laravel Mix的public/js/app.js文件。您可以通过查看webpack.mix.js来确定这种情况，在其中，您会发现以下语句：

mix.js('resources/js/app.js', 'public/js')

其中

resources/js/app.js需要resources/js/bootstrap.js。

如果您希望手动为自己编译，请先运行：

npm install，然后在开发模式下运行npm run dev，或者在生产模式下运行npm run prod。

但无论如何（我已经偏离主题了）....

结果问题出在这里：

resources/views/layouts/app.blade.php

有一个带有defer属性的script标记实例，如下所示:

<script src="{{ asset('js/app.js') }}" defer></script>

那个defer属性是导致所有问题的原因。

所以我这样移除了它：

<script src="{{ asset('js/app.js') }}"></script>

这样就解决了 jQuery 未定义的问题。

我更喜欢将 JavaScript 延迟加载，只需将脚本标签移到接近 body HTML 标记的末尾即可。

3
如果你使用Vue.js，那么defer语句似乎是必需的。如果你只是将<script>标签移到<body>标签的末尾，它也可以正常工作。不确定为什么他们把它放在那里。 - Martin
在我的情况下，即使我已经将脚本标签放在了body的末尾，它仍然会导致问题。那么这个“defer”到底是用来做什么的？ - Pathros
3

我使用mix.copy而不是mix.js来处理jQuery，效果非常好！

示例：

mix.copy('node_modules/jquery/dist/jquery.min.js', 'public/vendor/jquery/jquery.min.js');
然后在 </body> 前添加 <script src="{{ asset('vendor/jquery/jquery.min.js') }}"></script>。 - Konsortium ICT Pantai Timur
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接