Как получить доступ к пакету, установленному npm, в приложении hexo

Я создаю веб-приложение, используя Hexo. Я хочу использовать пакет под названием slick-carousel на одной из своих страниц. Кстати, этот пакет также содержит jQuery. Итак, я успешно установил (и «сохранил») пакет через npm. Пакет отображается в моих папках node_modules и в моем файле package.json.

Я ожидал, что после этого у меня должен быть доступ как к jQuery, так и к гладким функциям в моих файлах уценки, но у меня его нет. Когда я отображаю сгенерированную страницу в своем браузере, мне говорят, что «jQuery не определен». Какой шаг мне здесь не хватает, чтобы я действительно мог использовать свои установленные пакеты?

Вот тег script, который я добавил в свой файл уценки, который я пытаюсь заставить работать:

<script> jQuery(document).ready(function(){ jQuery('.carousel').slick({ dots: true, infinite: true, speed: 300, slidesToShow: 1, centerMode: true, variableWidth: true }); }); </script>

Я все еще пытаюсь полностью понять взаимосвязь между установленными пакетами и остальной частью моего приложения, поэтому простите меня, если этот вопрос даже не имеет смысла. Любое понимание или объяснение, которое вы можете мне дать, будет высоко оценено!


person Kaitlyn    schedule 28.09.2016    source источник


Ответы (1)


Тот факт, что скрипты находятся в node_modules, не означает, что они автоматически добавляются в интерфейс ваших проектов.

Есть разные способы добиться того, что вам нужно:

Ручное перемещение активов

Вместо того, чтобы пытаться возиться с package.json и требованиями к модулю, вероятно, самый простой способ получить то, что вы хотите, — это переместить файлы дистрибутива jquery и slick-carousel из папки node_modules в папку, где Hexo сможет лучше с ними работать (после быстрое чтение, это должно быть source), затем вы просто связываете свой JS-файл в макете HTML, и все должно работать нормально

Автоматическое перемещение активов

С помощью какого-либо набора инструментов для выполнения задач (например, Gulp или Grunt) вы можете написать задачи, которые автоматически перемещают активы из папки node_modules в папку, доступную для Hexo, задача Gulp может выглядеть примерно так:

gulp.task('jquery', function () {
  return gulp.src('./node_modules/jquery/dist/jquery.js')
    .pipe(gulp.dest('./source/js'))
})

Использование require (если поддерживается)

Я никогда раньше не использовал Hexo, поэтому понятия не имею о его внутренностях, но иногда можно просто использовать require в файлах Javascript для загрузки загруженных модулей, чтобы вы могли использовать

window.jQuery = window.$ = require('jquery')

например, чтобы напрямую загрузить скрипт как модуль.

Возможно, вам придется проверить это самостоятельно, но, вероятно, это три наиболее распространенных способа обработки ресурсов в проектах Node.js.

person pixeldesu    schedule 30.09.2016