在 laravel 5.4 mix 上添加 jQuery

Add jQuery on laravel 5.4 mix

提问by Felipe Mathais

I'm already familiar with laravel 5.1 mix (elixir), and recently I decided to test laravel 5.4 mix.

我已经熟悉 laravel 5.1 mix (elixir)，最近我决定测试 laravel 5.4 mix。

I mixed my libs on vendors files.

我在供应商文件上混合了我的库。

mix
.styles([
    './node_modules/bootstrap/dist/css/bootstrap.css',
    './node_modules/font-awesome/css/font-awesome.css'
], 'public/css/vendor.css')
.js([
    './node_modules/jquery/dist/jquery.js',
    './node_modules/bootstrap/dist/js/bootstrap.js',
], 'public/js/vendor.js')
.disableNotifications()
.version();

And included vendor on my page.

并在我的页面上包含供应商。

<script src="{{ mix('js/vendor.js') }}" type="text/javascript" charset="utf-8" async defer></script>

But, when I want use jQuery I have this error on image below. Before, in the laravel 5.1 I did exactly that way.

但是，当我想使用 jQuery 时，我在下图中出现此错误。之前，在 laravel 5.1 中我就是这样做的。

What do I have to do?

我需要做什么？

回答by Gonzalo Faus

Just uncomment this line in your assets/js/bootstrap.jsfile:

只需在您的assets/js/bootstrap.js文件中取消注释这一行：

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

And make sure to require the bootstrap file in your assets/js/app.jslike this:

并确保assets/js/app.js像这样需要引导程序文件：

require('./bootstrap');

回答by pat64j

mix.autoload({ 'jquery': ['window.$', 'window.jQuery'] })

I had to add this to my webpack.mix.js

我不得不将它添加到我的 webpack.mix.js

回答by markcanals

The solution using laravel mix is force all modules to use the same jquery version: This is my code at top of webpack.mix.js:

使用 laravel mix 的解决方案是强制所有模块使用相同的 jquery 版本：这是我在 webpack.mix.js 顶部的代码：

mix.webpackConfig({
    resolve: {
        alias: {
             'jquery': path.join(__dirname, 'node_modules/jquery/src/jquery')
        }
    }
});