如何将外部 js 文件添加到 Laravel 项目 app.js 文件中？答案

【问题标题】：How to add external js file into Laravel project app.js file?如何将外部 js 文件添加到 Laravel 项目 app.js 文件中？
【发布时间】：2019-05-16 00:32:20
【问题描述】：

我想使用this 包进行音频均衡动画。我想将它添加到我的 Laravel 项目中，所以我复制了两个文件，分别是

jquery.reverseorder.js
jquery.equalizer.js

致/myproject/node_modules/myjss/

并添加了这两行

import 'myjss/jquery.equalizer'
import 'myjss/jquery.reverseorder'

转入/myproject/resources/js/app.js

但它返回TypeError: $(...).equalizer is not a function

我该如何解决？

【问题讨论】：

听起来这些文件希望 jQuery 以$ 的形式全局加载。
他们已经加载了，当我使用$('body').css('display', 'none'); 时它可以工作，然后什么都没有显示。所以 jQuery 正在工作。

标签： javascript node.js laravel webpack

【解决方案1】：

您不需要像那样保存这些文件。只需将它们保存在 laravel 的资产文件夹中即可。然后在 laravel 中，你应该像这样包含它 <script type="text/javascript" src="js/jquery.reverseorder.js"></script> 。在 src 路径中，可以使用 laravel 的asset_path。你可以在 js 或者 laravel 的刀片模板中包含这个路径。

【讨论】：

虽然在我的 Laravel 版本中我没有任何资产文件夹，但无论如何我已经按照你所说的做了，并将其与app.js 分开包含在页面中，但它又返回了另一个错误，即@987654324 @。但我认为即使它没有抛出错误也是错误的方式。因为它可以在 app.js 文件中加载，但现在应该加载三个文件，所以我猜现在性能会降低。
我告诉你的方式是这个插件的创建者使用的。确保首先加载 jquery 脚本，然后是它下面的两个文件。然后在所有这些包括的下面，写下这个插件的用法。它会起作用的。
是的，它在包含这三行包含的单个 html 文件中工作，但正如我所说，它在 Laravel 中不起作用，它返回错误 SyntaxError: expected expression, got '<'。
当然。当我将这两行添加到我的模板文件中时` `它将返回SyntaxError: expected expression, got '<'，当我删除它并将这两行添加到app.js文件import 'myjss/jquery.equalizer'; import 'myjss/jquery.reverseorder';中时，它将返回TypeError: $(...).equalizer is not a function