Laravel app.js 延迟未在内容之前加载

Question

我正在尝试添加 jquery 并用于新项目

app.js

require('./custom');
require('./bootstrap');
require('alpinejs');

custom.js

window.$ = require('jquery');
window.Swal = require('sweetalert2');

guest.blade.php

<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <meta name="csrf-token" content="{{ csrf_token() }}">

        <title>{{ config('app.name', 'Laravel') }}</title>

        <!-- Fonts -->
        <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">

        <!-- Styles -->
        <link rel="stylesheet" href="{{ mix('css/app.css') }}">

        <!-- Scripts -->
        <script src="{{ mix('js/app.js') }}" defer></script>
    </head>
    <body>
        <div class="font-sans text-gray-900 antialiased">
            {{ $slot }}
        </div>
    </body>
</html>

welcome.blade.php

<x-guest-layout>
    <script>
        function alerta() {//This Work
            Swal.fire("Hello World Sweetalert2");//This Work
            $('.lol').hide();//This Work
        }

        $(function() {//$ This not Work
            console.log( "ready!" );
        });
        Swal.fire("Hello World Sweetalert2");//This not Work
    </script>
    <x-jet-button onclick="alerta()" class="lol">Alert</x-jet-button>
</x-guest-layout>

最后得到错误Uncaught ReferenceError: $ is not defined or Uncaught ReferenceError: Swal is not defined

我该如何解决这个问题？

编辑：感谢@Areg，这个问题得到了解决，我在阅读 The Script element

后更好地理解了这一点

Answer 1

当您将某些内容写入 app.js 时，您需要稍后使用 npm run dev 或 npm run watch 对其进行编译。也不要推迟你的应用程序 js 文件，因为它被设计为运行文档加载后的脚本，如 w3schools

上所述

The defer attribute is a boolean attribute.

When present, it specifies that the script is executed when the page has finished parsing.

Note: The defer attribute is only for external scripts (should only be used if the src attribute is present).

Laravel app.js 延迟未在内容之前加载

Laravel app.js defer is not loading before content

javascript

laravel

node-modules