Npm модуль требует jQuery. Как исправить?

Question

[WebDev]

Сайт на вью жс, подключил модуль, который рисует линии между элементами. Все хорошо, но этот модуль требует jQuery. И jquery у меня есть, тоже в виде модуля.
То есть код приложения выглядит так:

import $ from 'jquery'
import svgConnect from 'HTMLSVGconnect'

Модуль HTMLSVGconnect ругается, что не найден jQuery.
Код этого модуля выглядит так:

; (function ($, window, document, undefined) {
  //Код модуля
})(jQuery, window, document);

То есть он подразумевает, что на странице уже подключен jquery.
Я просто добавил импорт jquery в этот модуль и все заработало

import jQuery from 'jquery'

; (function ($, window, document, undefined) {
  //Код модуля
})(jQuery, window, document);

Но работало, пока я не установил новый модуль и npm не затер изменения.
Как сделать, чтоб модуль HTMLSVGconnect использовал модуль jquery?

Comments

[Lynn «Кофеман»]

У вас же наверняка какой-нибудь webpack собирает скрипты.
https://webpack.js.org/guides/shimming/#shimming-g...

Answer 1

[abberati]

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

Самое простое решение:

import $ from 'jquery'
window.jQuery = $

import svgConnect from 'HTMLSVGconnect'

Может быть, можно провернуть как-то иначе, но в любом случае будет костыль.

Comments

[Дмитрий Беляев]

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

[abberati]

невозможно импортировать плагин до инициализации $ в window
можно сделать так:

// myJquery.js
import $ from 'jquery';
window.jQuery = $;

// hereWeGo.js
import "./myJquery.js";
import svgConnect from 'HTMLSVGconnect'

[WebDev]

abberati, А не будет ли никаких конфликтов?

// myJquery.js
import $ from 'jquery';
window.jQuery = $;

// hereWeGo.js
import "./myJquery.js";
import $ from 'jquery';
import svgConnect from 'HTMLSVGconnect'

Получается, что jquery импортируется 2 раза.

[abberati]

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

можно ещё правильнее сделать (не подумал раньше): попросить webpack, чтобы он вынес $ в window

Answer 2

[Ihor Bratukh]

Попробуйте обернуть код плагина в такую функцию

;(function(factory) {
	if (typeof define === 'function' && define.amd) {
		define(['jquery'], factory);
	} else if (typeof module === 'object' && module.exports) {
		module.exports = function(root, jQuery) {
			if (jQuery === undefined) {
				if (typeof window !== 'undefined') {
					jQuery = require('jquery');
				} else {
					jQuery = require('jquery')(root);
				}
			}
			factory(jQuery);
			return jQuery;
		};
	} else {
		factory(jQuery);
	}
}(function($) {
	// код плагина
}));

Comments

[WebDev]

Прямо в npm_modules? Обновление ведь его затрет.

[abberati]

ничего не надо писать в npm_modules. это библиотечные файлы, правило хорошего тона - не модифицировать их и не хранить их в проекте в явном виде. ответ отдельным постом