Laravel 混合会在加载后中断每个 jquery 插件

Question

我对 laravel mix 和 npm 完全陌生，所以我在这里完全不知所措。

现在，我安装了 laravel mix，因为我需要 laravel echo。可以正常工作并且运行启动了，但是从那以后 jquery 插件没有加载，我得到的是：

Uncaught TypeError: $(...).perfectScrollbar is not a function

我不知道，这可能是因为 jquery 现在被异步加载并且 Mix 覆盖了我设置的 /div> 方式？但是，我注意到由于文档来自：

，我也许可以通过 npm 安装这个插件

npm install perfect-scrollbar

我做到了，它已安装但我现在如何才能包含它以便 laravel 混合加载它？在过去的 6 个小时里，我一直在寻找一种方法，但我就是不明白该怎么做。任何帮助将不胜感激！

Answer 1

好的...不确定我是否知道您的问题出在哪里，但这里有一些您可以检查的事项...

首先，mix 将运行 webpack... wbpack.mix.js ... 如果您没有更改它，它将包含如下内容：

mix.js('resources/assets/js/app.js', 'public/js')
   .sass('resources/assets/sass/app.scss', 'public/css');

现在，这将运行 webpack 并编译您的资源...在我们感兴趣的情况下，app.js。

您是否按照完美滚动条文档中的建议将您的库 (perfect-scrollbar) 包含在 app.js 中？

var Ps = require('perfect-scrollbar');

您还需要为它处理 css.. 通过将其导入您的 app.scss ... 如果您使用 sass标准 laravel 安装...

@import "node_modules/perfect-scrollbar/src/css/main.scss"

重建，如果您使用 Ps 作为 perfect-scrollbar 对象，您应该可以开始了。您也可以将其添加到 window 中...例如 window.Ps = require...

npm install 只是将包安装在您的 node_modules 目录中。到达那里后，您必须将它们导入已编译的 css 和 js 应用程序文件。

希望对您有所帮助。

Laravel mix breaks every jquery plugin after loaded