Добавление и использование плагина jQuery с Meteor v1.7.0.3 - PullRequest
Новая
       12

Добавление и использование плагина jQuery с Meteor v1.7.0.3

0 голосов
/ 27 июня 2018

Метеор начал использовать впервые только неделю назад, поэтому я все еще чувствую себя хорошо.

Я не знаю, как использовать плагины jQuery, установленные через npm.

Я пробежал: 

meteor npm install overlayscrollbars --save

Который добавил его в мой package.json файл ... 

"dependencies": {
"@babel/runtime": "^7.0.0-beta.51",
"meteor-node-stubs": "^0.4.1",
"overlayscrollbars": "^1.5.0",
"prop-types": "^15.6.2",
"react": "^16.4.1",
"react-dom": "^16.4.1",
"react-router": "^4.3.1",
"react-router-dom": "^4.3.1",
"simpl-schema": "^1.5.0"
},

... но я понятия не имею, как использовать его внутри Метеора?

Я не использую шаблонизатор Blaze, вместо этого я использую React.

Я нашел несколько постов, отвечающих на аналогичный вопрос, но все они были связаны с использованием Blaze и очень старых устаревших версий Meteor.

Я запустил jQuery, попробовал и протестировал некоторые выходные данные console.log и попытался добавить файл плагина js в main.html со стандартными тегами <script>, но Meteor это совсем не нравится. Я также попытался импортировать его в проект: 

import overlayScrollbars from 'overlayscrollbars';

А также пробовал: 

const overlayScrollbars = require('overlayscrollbars');

Но они ничего не сделали, и, честно говоря, я вполне уверен, что это был совершенно неправильный подход в любом случае.

Я также попытался добавить весь исходный код плагина на клиентскую сторону app.js, но опять же это ничего не сделало.

При просмотре источника моего приложения в браузере я вижу, что файл, который я хочу использовать, даже не загружается Meteor - PasteBin - Просто ответ о том, как выполнить эту часть будет огромная помощь.

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

Кажется, я нигде не могу найти гида.

Может кто-нибудь, пожалуйста, укажите мне правильное направление некоторых документов или объясните процедуру, которой я должен следовать, чтобы использовать любой плагин jQuery внутри Meteor, пожалуйста?

** Отредактируйте, чтобы показать, как я это называю в main.js (это правильный синтаксис для использования jQuery в Meteor?) 

Meteor.startup(() => {
  Tracker.autorun(() => {
    ReactDOM.render(<p>Sidebar</p>, document.getElementById('sidebar'));
    ReactDOM.render(<App/>, document.getElementById('app'));
    $(function() { 
       $('.main-content').overlayScrollbars({ }); 
    });
  })
});

** Редактировать после ответа ...

У меня возникла проблема из-за того, что плагин не импортировался на правильную страницу, я импортировал его только в файл app.js, а не в шаблон, который отображал компонент.

Кроме того, чтобы прояснить способ его инициации (удаление документа готово), вызов был перемещен в компонент следующим образом: 

componentDidMount() {
  $('.main-content').overlayScrollbars({ });
}

Спасибо Фреду за помощь. Судя по тому, что я понял из-за моего ограниченного знакомства с Метеором, это фантастическая платформа, и я придерживаюсь ее наверняка, но вам действительно нужно идти в ногу с обновлениями, потому что между версиями часто возникают проблемы, так как методы изменилось. Другими словами, если вы новичок, как и я, пользуясь последней версией, не пытайтесь следовать учебным пособиям по Meteor, которым более года, если вы не готовы к отладке и копанию в документации. чтобы понять, почему старый код больше не работает. Но опять же, если вы сделаете это таким образом, вы получите гораздо более обширную базу знаний, к которой мы все стремимся:)

1 Ответ

0 голосов
/ 27 июня 2018

Я расскажу вам о том, как работает overlayscrollbars, чтобы мы могли понять, как правильно включить его в ваше приложение.

  1. Я начинаю с просмотра исходного файла package.json , в частности, ключа main:, который указывает на js/OverlayScrollbars.js

  2. Я смотрю на js/OverlayScrollbars.js, чтобы посмотреть, экспортирует ли он модуль. На строках 14-21 видно, что он использует шаблон UMD для указания своего экспорта.

    Поскольку Meteor использует CommonJS для управления модулями, объект module.exports - это то, что вы получаете, когда вы import something from 'overlayscrollbars';

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

    И если обнаружен jQuery, он также регистрируется как плагин jQuery на строках 6042-6058

    Теперь мы знаем, что можем импортировать его, если захотим, но он также должен быть доступен глобально.

  3. Следующий ключевой момент - убедиться, что модуль работает, чтобы он действительно оказался в глобальной области видимости. Я предпочитаю использовать синтаксис импорта в каждом файле, который зависит от него, так что, когда вы в конечном итоге измените этот файл или протестируете его изолированно, он принесет все его зависимости для поездки.

Так как мне импортировать его?

Вы были совершенно правы с import overlayScrollbars from 'overlayscrollbars';

Итак, вопрос в том, почему это не сработало?

Я запустил быстрый новый проект с meteor create test, добавил пакет с meteor npm install overlayscrollbars --save и добавил import overlayScrollbars from 'overlayscrollbars'; к /client/main.js.

  • overlayScrollbars можно было использовать в этом файле.
  • OverlayScrollbars было в окне / глобальная область действия
  • overlayScrollbars - это метод для объектов jQuery

Так что проблема должна быть в другом. Какую ошибку вы видите? Где вы положили заявление на импорт?

Глядя на ваш телефонный код:

  1. Вам не нужен автозапуск, поскольку вы не вызываете никаких реактивных источников данных. (И если вы это сделаете, это приведет к нежелательному повторному рендерингу всего приложения)

  2. Я бы переместил код полосы прокрутки в componentDidMount хук компонента, который отображает .main-content. таким образом, элемент гарантированно существует при выполнении кода.

  3. Нет необходимости заключать его в блок $(function(){...}). Событие document.ready не относится к приложениям React

Последнее редактирование

Для плагинов jQuery, которые не имеют шаблона UMD, обычно работает прямая import 'plugin-name';.

Если это не сработает (часто из-за неработающего раздела UMD), в Meteor вы можете скопировать файлы в папку client/compatibility/, и они будут загружены без какой-либо обертки модуля, открывая их переменные для глобальной области видимости как в крайнем случае. Это эквивалентно добавлению тега скрипта напрямую

...