在 laravel 5.4 mix 上添加 jQuery

Posted

技术标签:

【中文标题】在 laravel 5.4 mix 上添加 jQuery【英文标题】:Add jQuery on laravel 5.4 mix 【发布时间】:2017-07-26 16:45:57 【问题描述】:

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

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

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();

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

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

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

我该怎么办?

【问题讨论】:

【参考方案1】:

只需在您的 assets/js/bootstrap.js 文件中取消注释此行:

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

并确保在您的assets/js/app.js 中需要引导文件,如下所示:

require('./bootstrap');

【讨论】:

【参考方案2】:
mix.autoload( 'jquery': ['window.$', 'window.jQuery'] )

我必须将它添加到我的 webpack.mix.js

【讨论】:

为了让它工作,你的资源/资产/js/bootstrap.js 必须是必需的。并且必须存在以下行。 'window.$ = window.jQuery = require('jquery');' IMO 这是正确的答案。该数组是一个变量列表,这些变量必须完全匹配,以便 Webpack 将模块包含在它被调用的文件中。例如,Bootstrap 无法使用答案中的数组,因为 Bootstrap 会检查变量 jQuerywindow.jQueryjQuery 不同,必须准确);将 jQuery 添加到数组中将使 Bootstrap 工作。 mix.autoload 绝对是更好的方法,因为我们处理的是由 laravel-mix 包装的 web pack【参考方案3】:

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

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

【讨论】:

以上是关于在 laravel 5.4 mix 上添加 jQuery的主要内容,如果未能解决你的问题,请参考以下文章

Laravel 5.4 Webpack Mix - 合并SCSS和CSS

Laravel 5.4 刀片和 select2 不工作

javascript Laravel:在webpack.mix.js中添加Font Awesome

在 AWS Serverless 平台上部署 Laravel (laravel-mix) 应用程序

Laravel 5.4 + jQuery CORS 请求

在 Laravel 5.4 的查询生成器中添加 lists() 方法