Блог

Как предполагается импортировать AlpineJS с помощью NPM?

В документах AlpineJS говорится:

Из npm: установите пакет из npm.

npm i alpinejs

Включите его в свой скрипт.

import 'alpinejs'

Я поместил эту последнюю строку в один из моих файлов JavaScript. Однако ничего не произошло. Я подумал, может быть, мне нужен такой пакет, как Grunt, чтобы этот импорт действительно что-то делал. Я бы не знал, как иначе клиент должен знать, что ‘alpinejs’ ссылается на alpine.js in node_modules/alpinejes/dist . Grunt просто позволяет строке оставаться такой, какая она есть, и не помещает файл AlpineJS в мой выходной каталог.

Чего я хочу достичь:

• Используйте AlpineJS в клиенте, не будучи зависимым от CDN
• Возможно: объединение alpine.js с другими файлами сценариев для уменьшения количества запросов к серверу

Для обработки вашего JS-файла вам нужен пакет, поддерживающий модули / импорт npm (который включает Alpine.js импорт). Webpack, rollup или parcel должны выполнять эту работу.

В противном случае да, вы могли бы объединить Alpine.js файл at node_modules/alpinejs/dist/alpine.js с вашим JS-файлом и используйте его (в этот момент вам не нужна инструкция import).

Вариант первый

 import Alpine from 'alpinejs'
window.Alpine = Alpine
Alpine.start();
  

Лучший вариант для меня

 import Alpine from 'alpinejs';
window.Alpine = Alpine;
queueMicrotask(() => {
    Alpine.start()
});