Как использовать библиотеку, установленную с NPM в laravel 5?

Question

В настоящее время я использую Laravel 5.8 и не могу понять, как использовать сценарии, созданные с помощью NPM, в моих представлениях.

Например, это простой и красивый инструмент выбора значков (fontawesome-iconpicker) , в консоли:

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

+ fontawesome-iconpicker@3.2.0
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

Мой вопрос касается установки npm в Laravel, не только этот сборщик уже много исследовал, но так и не узнал, что я делаю неправильно или чего здесь не хватает.

===== ОБНОВЛЕНИЕ =====

Итак, lib сейчас работает, но я не совсем уверен в одном из шагов.

После запуска 'npm i fontawesome-iconpicker' до 'npm run dev' есть один шаг, по крайней мере в Laravel. Откройте свои «resources \ js \ app.js» и под «require» («./ bootstrap»); ' Вы можете определить требование как:

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

После этого вы можете запустить 'npm run dev', и библиотека будет скомпилирована в файле 'public / js / app.js' и станет доступной по определенному вами имени ('iconpicker').

НО, когда я попробовал это с другой библиотекой, 'npm run dev' не прошел, потому что didint нашел 'require (' NAME_OF_OTHER_LIB_ALREADY_INSTALLED_WITH_NPM ');'

Итак, вопрос остается ^^ "

Answer 1

Я столкнулся с такой же проблемой, и я почти уверен, что она исходит из микса Laravel, фактически jquery загружается в ваш файл app.js, но этот файл загружается так:

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

Так что, если вы используете jquery в vue, он еще не загружен, и вы получаете такие ошибки.

Если вы удалите «defer», он будет работать, но лучше всего дождаться загрузки jquery, прежде чем использовать его. Вы можете написать свой javascript непосредственно в свой ressource / js / app.js, чтобы избежать подобных проблем, он будет скомпилирован, когда вы запустите npm run watch, а скомпилированный файл будет в public / js / app.js