在 Laravel Blade 中运行 javascript 时出现 ReferenceError答案

【问题标题】：ReferenceError when running javascript in a Laravel Blade在 Laravel Blade 中运行 javascript 时出现 ReferenceError
【发布时间】：2019-05-29 21:36:18
【问题描述】：

我正在尝试从刀片中的 app.js 运行一个简单的 javascript 函数，但我收到一个 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 is not defined”。

我能做什么？

提前致谢

【问题讨论】：

标签： javascript laravel-5

【解决方案1】：

使用 Laravel Mix 编译通过 webpack 运行您的代码并将其放入一个包中。它不会向全局范围添加任何内容。如果您确实希望该函数在全局范围内，请将其直接分配给document 或window：

在 app.js 中：

require('./bootstrap');

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

还建议您使用刀片中的辅助功能加载静态资产

<script src="{{asset('js/app.js')}}"></script>
<link rel="stylesheet" href="{{asset('css/app.css')}}">

【讨论】：