Я пытаюсь определить свой Javascript для моей страницы в моем блейд-файле, определив для него отдельный раздел в файле. Я могу добавить тот же код jQuery в файл app.js, и он работает без проблем, но когда я помещаю его в блейд-файл, я получаю ошибку
Uncaught ReferenceError: $ is not defined
Файл макета - app.blade.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>{{ config('app.name', 'Laravel') }}</title>
<script src="{{ asset('js/app.js') }}" defer></script>
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<link href="{{ asset('css/app.css') }}" rel="stylesheet">
</head>
<body class="fixed-nav sticky-footer bg-dark" id="page-top">
<!-- Navigation-->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top" id="mainNav">
<!-- Nav Stuff -->
</nav>
<!-- End Navigation -->
<!-- Body -->
<div class="content-wrapper">
<div class="container-fluid">
@yield('content')
</div>
<footer class="sticky-footer">
<!-- footer stuff -->
</footer>
</div>
@yield('script')
</body>
</html>
Страница содержимого - page1.blade.php
@extends('layouts.app')
@section('content')
<div class="container">
<!-- Page Stuff -->
</div>
@endsection
@section('script')
<script>
$(document).ready(function()
{
alert('hello world');
});
</script>
@endsection
Я бы предпочел не помещать весь свой Javascript в один файл app.js, я хотел бы иметь возможность прекрасно использовать этот раздел. Прямой Javascript здесь отлично работает, а jQuery - нет.
редактирование:
Вот файл app.js, который включает библиотеку jQuery.
require('jquery');
require('./bootstrap');
require('jquery-easing');
// Administration Controller - Add System Type -> This code works just fine.
var numSysDataRows = 5;
$('#add-customer-information').click(function()
{
$('#system-customer-information').append('<div class="form-group"><label for="col'+numSysDataRows+'">System Data:</label><input type="text" name="col[]" id="col'+numSysDataRows+'" class="form-control" /></div>');
numSysDataRows++;
});
Если я смотрю на исходный код и проверяю файл app.js с веб-сервера, я вижу, что jQuery загружается в файл app.js.