Laravel 5 WebPack JQuery - $ 未定义

Question

我有 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，然后我可以在刀片中的内联 html 代码中使用它？

Answer 1

在 app.blade.php 中

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

去掉 defer 所以做它

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

https://github.com/laravel/framework/issues/17634#issuecomment-375473990

Answer 2

在你的 main.js 文件中试试这个

global.$ = global.jQuery = require('jquery');

Answer 3

当我尝试使用它提供的一些默认视图时，我在 Laravel 5.7 中遇到了这个问题。我试图在一些扩展默认 layout/app.blade.php template 的刀片视图模板中使用 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 src="{{ asset('js/app.js') }}" defer></script>

defer 属性导致了所有问题。

所以我像这样删除了它：

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

解决了jQuery未定义的问题。

我更喜欢通过简单地将脚本标签移近body HTML 标签的末尾来延迟我的 JavaScript 加载。

Answer 4

我在 jQuery 中使用 mix.copy 而不是 mix.js，效果很好！

示例：

mix.copy('node_modules/jquery/dist/jquery.min.js', 'public/vendor/jquery/jquery.min.js');