javascript - Laravel-Mix 使用 webpack : JQuery is not autoloaded-6ren

javascript - Laravel-Mix 使用 webpack : JQuery is not autoloaded

转载作者：行者123 更新时间：2023-12-04 16:05:49

27

4

我正在尝试使用 Laravel-Mix 编译我的 Laravel 项目，但我遇到了一个问题，即即使使用 mix.autoload 指令也无法在浏览器中自动加载 jQuery :

bootstrap.min.js:6 Uncaught Error: Bootstrap's JavaScript requires jQuery at bootstrap.min.js:6

如您所见，我在页面底部的脚本标记中包含了 bootstrap，而 jquery 是我在 npm package.json 中的依赖项的一部分。

index.blade.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8"/>
        <title>Test</title>
    </head>
    <body>
        <p>Hello</p>
        <script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
        <script src="{{ asset(mix('js/bundle.js')) }}" type="text/javascript"></script>
    </body>
</html>

webpack.mix.js

const { mix } = require('laravel-mix');

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

mix.js(['assets/js/script.js'], 'public/js/bundle.js');

if (mix.inProduction()) {
    mix.disableNotifications();
    mix.version();
}

最佳答案

安装 jQuery 和 Popper。

npm i jquery
npm i popper.js

在你的/resources/js/bootstrap.js 中。

try {
    window.Popper = require('popper.js').default;
    window.$ = window.jQuery = require('jquery');

在 webpack.mix.js 中。

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

在你的 Blade 模板中。

<script src="{{ mix('js/app.js') }}" type="text/javascript"></script>

关于javascript - Laravel-Mix 使用 webpack : JQuery is not autoloaded，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48808928/

27

4

0

文章推荐： angular - 使用主题和代理传递数据

文章推荐： Openiddict 自省(introspection)不起作用(访问 token 无效。)

文章推荐： php - Twig 上的 Symfony 选民

文章推荐： spring - spring 使用hibernate 的正确方法是什么

Laravel mix 在 mix v4+ 中总是未定义
任何调用 npm run升级到 Mix v4.x 后导致 mix 未定义。我在每次运行时都会看到这样的错误: > npm run development > @ development /projec
laravel-mix - 升级到 Laravel MIX 6 后传入环境变量
升级到 Laravel-Mix 6 之前: Laravel-Mix 版本:5.0.9(支持 Webpack 4) NPM 版本:6.14.5 通过这个 laravel 混合版本，我能够通过运行 pac
Laravel 混合 : using `mix.js` or `mix.scripts`
在 Laravel 5.5 中，我使用 laravel-mix 来编译我的 Assets 。但是我不清楚:mix.js 之间有什么区别？和 mix.scripts为什么我要使用一个而不是另一个？最
javascript - mix.scripts 不工作(webpack.mix.js)
我有以下 webpack.mix.js: const { mix } = require('laravel-mix'); mix.scripts([ 'resources/assets/js/
elixir - `mix ecto.rollback` 和 `mix ecto.migrate` 命令的调试级别日志记录
目前，我正在寻找在运行 mix 任务时添加 SQL 语句日志记录的方法。例如，mix ecto.rollback 和 mix ecto.migrate 等命令输出信息: ... 13:45:53.01
elixir - 为 Mix 任务启动 Ecto(Mix.EctoSQL.ensure_started 不再工作)
我知道这个问题已经被问过了，答案总是单独的答案。但是我看到 Mix.EctoSQL.ensure_started 提到了很多，这似乎是公认的方法。然而，在 ecto_sql 3.1.2 中，此功能
elixir - mix.compile 返回错误 (Mix) 无法编译 "src/gettext_po_parser.yrl"因为找不到应用程序 "parsetools"
mix compile ==> gettext could not compile dependency :gettext, "mix compile" failed. You can recompi
javascript - 使用 webpack.mix 编译 js 文件时，mix.scripts 在 laravel 5.5 上不起作用
我正在使用 Laravel 5.5 ，在 webpack.mix 文件中，mix.styles 函数完美运行，我完美地编译了我的 css 文件，但是mix.scripts 不编译我在文档中找到的 js
mix - 如何设置默认的Elixir混合任务
如果我有一个mix.exs文件，例如: defmodule Mix.Tasks.My_task do use Mix.Task @shortdoc "Perform my task" de
Laravel Mix 不组合样式
这是我第一次使用 Laravel Mix、NodeJS 和 NPM。我试图遵循 Laravel 的文档并相信我做得对，但谁知道呢。我正在尝试将多个 CSS 文件合并为一个。 webpack.mix.
mixed-models - 每个物种使用多个条目的系统发育模型
我对系统发育回归模型比较陌生。过去，当我的树中每个物种只有 1 个条目时，我使用了 PGLS。现在我有一个包含总共 9 个物种的数千条记录的数据集，我想运行一个系统发育模型。我阅读了最常见软件包(例如
Laravel Mix - 是否需要链接以确保执行顺序？
TLDR；您是否必须链接 Laravel Mix 方法来维护执行顺序？是否有任何异步方法会阻止使用以下非链接模式，mix.scripts(); mix.js(); mix.sass(); ? 我运行
CSS @supports : mixing "not" with "and" or "or"
我想为支持“显示:网格”但不支持 IE/MS Edge 的浏览器提供特定部分的 CSS。你如何混合正面和负面的@support 查询？你能写“and not”还是有类似的符号？不幸的是，以下方法不起
Laravel mix 生成相对路径
在生产中，加载我使用的 Assets ，例如: 并期望在编译时看到: 但是我只是看到相对路径: webpack.mix.js: mix .js('resources/assets/js/ap
assembly - MIX 中的除法是如何进行的？
有人可以向我解释一下 MIX 中的除法(来自 Knuth 的 TAOCP)是如何在字节到字节的基础上工作的吗？ rA = |-| . . . .0| rX = |+|1235|0|3|1| 内存位置
Laravel-Mix 字体路径问题
我正在尝试使用我从 themeforest 与 Laravel 购买的主题我已经使用 mix.copy 将我的字体从 node_modules 移动到我的 public 目录，这工作正常。/ 但是，
elixir - mix 在代理后面不起作用
至少就在两周前，我一直在代理后面使用mix。但是我昨天发现 mix 无法在代理后面工作。混合版本是1.1.1。mix local.hex 运行。但是mix deps.get 出现错误。 $ mix d
c++ - 文件系统路径字符串方法返回 mixed\and/
我有一个 C++ 程序，我在其中使用递归迭代器遍历我作为参数提供给程序的文件夹。问题是，当我在路径上调用 .string 时，我在路径中混合了\和/。使用 .generic_string 修复了这个
javascript - Laravel Mix，如何在混合时传递变量？
所以我有一个 JS 文件，我想使用 Laravel mix 进行混合、复制和压缩；我的 webpack.mix.js 文件如下所示: const mix = require('laravel-mix'
elixir - 如何在伞形项目的根目录下创建 Mix 任务？
我有一个 Elixir 伞形项目。这个项目中的每个应用程序都可以使用 mix escript.build 编译成可执行文件。我正在尝试从伞项目的根目录运行此命令并收到以下错误 ** (Runtime

首页

博学

6Ren·AI

商城

javascript - Laravel-Mix 使用 webpack : JQuery is not autoloaded