Laravel 混合 (webpack) 内联 JS 未定义 jQuery/vendors

Question

在为一些看似很常见的问题寻找解决方案数小时后，一直在做噩梦，目前只是在兜圈子。

我最近将我的 Laravel 项目从使用 gulp 更改为 Laravel Mix，SASS 等都运行良好，但我的 JS 不正常。

在 blade/php 模板中使用 jQuery * inline * 的任何内容都会失败：

Uncaught ReferenceError: jQuery is not defined

webpack.mix.js（选择模块）：

let mix = require('laravel-mix');

mix.js('resources/assets/js/app.js', 'public/js').extract(
  ['jquery', 'foundation-sites', 'vue', 'toastr', 'jscroll', 'chosen-js', 'what-input']
);

mix.sass('resources/assets/sass/app.scss', 'public/css');

master.blade.php（extract method将它们分开）：

<script type="text/javascript" src="/js/manifest.js"></script>
<script type="text/javascript" src="/js/vendor.js"></script>
<script type="text/javascript" src="/js/app.js"></script>

app.js:

const jQuery = require('jquery');
// window.$ = global.jQuery = $;
// window.jQuery = jQuery;
const toastr = require('toastr');
const chosen = require('chosen-js');
const whatInput = require('what-input');

const Foundation = require('foundation-sites');
const Vue = require('Vue');
const jScroll = require('jscroll');
const mousetrap = require('mousetrap');

我试过导入，直接要求，离开要求并使用自动加载方法，似乎没有任何效果。有些变体也会说 $ 未定义，只是不知道该转向哪里。

有人可以指导我正确的方向吗？多年来一直将 Laravel 与 gulp 一起使用，但仅使用香草 JS，这个 webpack 让我感到难过。

Answer 1

在您的 app.js 中，在行尾插入以下内容

const jQuery = require('jQuery')
// other packages here

window.$ = window.jQuery = jQuery

Laravel 混合 (webpack) 内联 JS 未定义 jQuery/vendors

Laravel Mix (webpack) Inline JS undefined jQuery/vendors

javascript

php

laravel

webpack

laravel-mix