Как использовать webpack для загрузки CDN или внешнего поставщика javascript lib в js файле, а не в html файле

Я использую реактивный стартовый набор для программирования на стороне клиента. Он использует реакцию и webpack. Нет index.html или любого html для редактирования, все js файлы. Мой вопрос в том, хочу ли я загрузить поставщика js lib из облака, как это сделать?

Это легко сделать в html файле. <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>

Однако в js файле он использует только установленные npm пакеты. Как я могу импортировать вышеупомянутый lib без html файла? Я попытался импортировать и потребовать, они работают только для локальных файлов.

обновление 10/21/15 Пока я пробовал два направления, и не идеален.

@minheq да, есть файл html файла для ответа на запуск набора. Это html.js под src/components/Html. Я могу установить облако lib и все его зависимости там, как это:

        <div id="app" dangerouslySetInnerHTML={{__html: this.props.body}} />
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
        <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>
        <script src="/app.js"></script>
        <script dangerouslySetInnerHTML={this.trackingCode()} />
    </body>

Хорошая новость - это работает, мне не нужно ничего делать в js файле, не импортировать и не требовать. Однако теперь у меня есть две jquery-библиотеки, загруженные по-разному. Один здесь, другой через npm и webpack. Интересно, что это вызовет у меня проблемы позже. Используемая мной маршрутная реакция дает мне ошибку "undefined variable", если я ввожу ни одного домашнего пути в окно браузера из-за загрузки на стороне сервера, я думаю. Поэтому это решение не очень хорошо.

Используйте функцию внешних веб-страниц. Это описано как: ссылка. "Вы также можете использовать внешние параметры для приложений, когда хотите импортировать существующий API в пакет. Т.е. вы хотите использовать jquery из CDN (отдельный тег) и все еще хотите потребовать (" jquery ") в своем комплекте. укажите его как внешний: {externals: {jquery:" jQuery "}}." Однако документация, которую я нашел в нескольких местах, все взволнована тем, как это сделать. До сих пор я понятия не имею, как использовать его для замены <script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script> в html.

Ответ 1

Существует один html файл, который определенно используется для пользователей, подключенных с помощью js bundle. Возможно, вы могли бы прикрепить тэг script к этому html файлу

Ответ 2

externals не предназначен для этого. Это означает, что "не компилируйте этот ресурс в последний пакет, потому что я сам его включу"

Вам нужна реализация загрузчика script, такая как script.js. Я также написал простое приложение для сравнения различных реализаций загрузчика script: ссылка.

Ответ 3

Вы можете создать тег script в своем JS как

$("body").append($("<script src="https://forio.com/tools/js-libs/1.5.0/epicenter.min.js"></script>"))

Ответ 4

var $script = require("scriptjs");
$script("//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js", function() {
  $('body').html('It works!')
});

Ответ 5

Использовать webpack externals:

externals позволяет указать зависимости для вашей библиотеки, которые не разрешены webpack, а становятся зависимостями вывода. Эта означает, что они импортируются из среды во время выполнения.