在 Laravel 5.5 中包含 JS 库答案

【问题标题】：Include JS libraries in Laravel 5.5在 Laravel 5.5 中包含 JS 库
【发布时间】：2017-06-16 10:35:30
【问题描述】：

我阅读了this 文档页面，了解如何包含 JQuery 之类的库。我是这样处理的：

npm install jquery
npm run dev

由于此后 JQuery 没有神奇地可用，我环顾四周，发现它在 public/js/app.js 中被引用和使用。所以我在主布局文件中使用了以下行，现在我可以使用 JQuery。

<script src="{{asset('js/app.js')}}"></script>

我在网上的任何地方都没有看到这样的解决方法，所以我的问题是，我做得对吗？此外，我在控制台中收到此错误：

TypeError: window.Laravel 未定义[了解更多] http://localhost/js/app.js:1697:1 webpack_require http://localhost/js/app.js:20:12 http://localhost/js/app.js:778:1 webpack_require http://localhost/js/app.js:20:12 http://localhost/js/app.js:41491:1 webpack_require http://localhost/js/app.js:20:12 http://localhost/js/app.js:66:18 http://localhost/js/app.js:1:11

【问题讨论】：

这是 laravel 5.4...

标签： laravel laravel-5

【解决方案1】：

是的，这是在 Laravel 5.4 和 5.5 中包含 jQuery 的最直接方式。但这可能不是唯一的方法，也不是最好的方法。 Laravel 至少允许两种方式来包含外部或自定义 JS 库。

方法 A：不使用 Laravel Mix

方法 B：使用 Laravel Mix (npm run dev/production)

Laravel 使用方法 B 在文件 resources/assets/js/bootstrap.js 中包含 jQuery。

要使resources/assets 中的任何更改生效，首先需要在项目目录下运行npm run dev/production。这会将assets/js/中包含的所有JS文件合并到一个文件public/js/app.js中，然后可以通过包含使用该文件

<script src="{{asset('js/app.js')}}"></script>

在视图的<pre><head>...</head></pre> 块中。

至于window.Laravel is undefined错误，这个

<script>
    window.Laravel = {!! json_encode([
        'csrfToken' => csrf_token(),
    ]) !!};
</script>

在每个需要和之前 public/js/app.js 的视图文件的<head>...</head> 中也需要。

【讨论】：

【解决方案2】：

Laravel 5.5 自带 jQuery 开箱即用。你实际上不需要做任何事情。

您的错误似乎与它的 CSRF 令牌有关。参考window.Laravel is undefined

将此添加到 HTML 文件的 <head></head> 部分。

<script>
    window.Laravel = {!! json_encode([
        'csrfToken'=>csrf_token()
    ]) !!}
</script>

【讨论】：

所以，回到问题。我通常如何包含 JS 库？
@MakanTayebi 所以当你第一次使用 Laravel 时，你会在 app.js 中有一个名为 bootstrap.js 的文件。 bootstrap.js 已经配置了开箱即用的 jQuery。您需要做的就是将您的app.js 脚本链接到您的HTML 文件中，这就是您所需要的。就像我说的，你的问题可能是 Laravel CSRF 令牌。有关代码块，请参见上面的答案。