ReferenceError при запуске JavaScript в Laravel Blade - PullRequest
0 голосов
/ 30 мая 2019

Я пытаюсь запустить простую функцию javascript из app.js в блейде, но я получаю ReferenceError, что функция не определена.

"app.js" был скомпилирован с "npm run dev".

Файл "app.js" в связном файле, и я вижу свою функцию там.

app.js

require('./bootstrap');

function myTest()
{
    alert(1);
}

index.blade.php

@extends('layout')

@section('title', 'Some Title')

@section('content')
    Welcome
@endsection

@section('scripts')
    <script>myTest();</script>
@endsection

Исходный код

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta name="csrf-token" content="DeUaExASeRzE1Wl0OUAyVFhmHQ7DZNfbZR7kETJ7">
    <script src="http://127.0.0.1:8000/js/app.js"></script>
    <link rel="stylesheet" href="http://127.0.0.1:8000/css/app.css">
    <title>WOG</title>
</head>
<body>
    <!-- ######### NavBar ######### -->
    <nav class="navbar navbar-expand-lg navbar-light bg-light">
      <div class="container">
      <a class="navbar-brand" href="/">WOG</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNavDropdown">
          <ul class="navbar-nav">
            <li class="nav-item">
              <a class="nav-link active" href="/">Home</a>
            </li>
            <li class="nav-item dropdown">
              <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Module</a>
              <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                <a class="dropdown-item" href="/modules/alphanum">Alphanumerisch</a>
                <a class="dropdown-item" href="/modules/num">Numerisch</a>
              </div>
            </li>
          </ul>
        </div>
        </div>
      </nav>

    <!-- ######### Content ######### -->
    <div class="container">
            <h1>Willkommen</h1>
            <script>myTest();</script>
    </div>
  </body>
</html>

Я ожидал получить простое предупреждение, но вместо этого я получаю «ReferenceError: myTest не определен».

Что я могу сделать?

Заранее спасибо

1 Ответ

0 голосов
/ 30 мая 2019

Компиляция с Laravel Mix запускает ваш код через веб-пакет и помещает его в пакет.Это ничего не добавит в глобальную сферу.Если вы действительно хотите эту функцию в глобальной области видимости, присвойте ее непосредственно document или window:

В app.js:

require('./bootstrap');

window.myTest = function myTest() {
    alert(1);
}

Также рекомендуется загрузитьстатические активы с функцией помощника в blade-файле

<script src="{{asset('js/app.js')}}"></script>
<link rel="stylesheet" href="{{asset('css/app.css')}}">
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...