У меня есть такая ситуация, когда я пытаюсь импортировать существующую библиотеку, которую я буду называть troublesome
(используя Webpack/Babel FWIW), и у нее есть глобальная ссылка на jQuery
в ней, которую я пытаюсь решить используя синтаксис модуля.
Я успешно импортировал jquery в "локальную" область модуля, используя:
import jQuery from 'jquery'
поэтому я попробовал:
import jQuery from 'jquery'
import 'troublesome'
но, возможно, не удивительно, что я получил что-то вроде jQuery is not a function
, отброшенное назад из troublesome.js
Я тоже пробовал это:
System.import('jquery')
.then(jQuery => {
window.jQuery = jQuery
})
import 'troublesome'
но, оказывается, что System.import
является частью так называемого "модуля-загрузчика", который извлекается из спецификации es6/2015, поэтому он не предоставляется Babel. Существует poly-fill, но Webpack не сможет управлять динамическим импортом, выполненным с помощью вызовов System.import
в любом случае.
но... если я вызову файлы script в index.html, например:
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/troublesome/troublesome.js"></script>
<script src="the-rest-of-my-js.js"></script>
ссылка на jQuery
разрешена в troublesome.js
, и все хорошо,
но я бы предпочел избежать маршрута тега script, поскольку веб-пакет не справляется с этим.
Можно ли рекомендовать достойную стратегию для решения таких сценариев?
Обновление
с некоторыми рекомендациями от @TN1ck, я в конечном итоге смог идентифицировать одно решение, ориентированное на Webpack, используя imports-loader
Конфигурация для этого решения выглядит примерно так:
//...
module: {
loaders: [
//...
{
test: require.resolve('troublesome'),
loader: "imports?jQuery=jquery,$=jquery"
}
]
}