如何在laravel 5中使用随NPM安装的库？

Question

我目前正在使用Laravel 5.8，我无法弄清楚如何在我的视图中使用NPM inatalled脚本。

例如，控制台中的this simple and nice icon picker (fontawesome-iconpicker)：

$ npm i fontawesome-iconpicker
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ [email protected]
added 1 package and removed 1 package in 16.388s

安装之后，我的package.json有''fontawesome-iconpicker'：“^ 3.2.0”，'在依赖项中，所以我运行

npm run dev

它编译得很好。现在，当我尝试在我的视图中使用lib时，控制台显示

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

我的问题是关于Laravel中的npm安装，不仅是这个选择器，已经研究了很多，但从未发现我做错了什么或者这里缺少什么。

=====更新=====

因此，lib现在正在运行，但我不能完全确定其中一个步骤。

运行'npm i fontawesome-iconpicker'后，至少在Laravel'npm run dev'之前有一步。打开'resources \ js \ app.js'，并在'require（'。/ bootstrap'）;'下你可以定义如下：

window.iconpicker = require('fontawesome-iconpicker');

在此之后，您可以运行'npm run dev'，并且lib将在'public / js / app.js'文件中编译，并且可以通过您定义的名称（'iconpicker'）访问。

但是，当我尝试使用其他lib时，'npm run dev'失败了，因为didint找到'require（'NAME_OF_OTHER_LIB_ALREADY_INSTALLED_WITH_NPM'）;'

所以，问题仍然是^^“

Answer 1

我遇到了同样的问题，我很确定它来自Laravel mix，实际上jquery已经加载到你的app.js文件中了，但是这个文件是这样加载的：

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

因此，如果你在你的vue中使用jquery，它还没有加载，你就会遇到这种错误。

如果删除“延迟”它将起作用，但最好的方法是在使用之前等待jquery加载。你可以直接在你的ressource / js / app.js中编写你的javascript来避免这种问题，当你运行npm run watch并且compilled文件将在public / js / app.js中时它将被编译