Webpack расслоение - JavaScript Bootstrap требует JQuery

Question

Я пытаюсь добиться следующего:

• bundle (в таком порядке) jquery, tether и bootstrap.js.
• загрузите этот комплект на странице HTML и под ним загрузите другие скрипты на странице.

Для этого я использую webpack 2 и CommonsChunkPlugin. Вот мой конфиг.

Для entries у меня есть:

const scriptsEntry = { 
    blog_index: SRC_DIR + "/js/pages/blog_index.js", 
    blog_about: SRC_DIR + "/js/pages/blog_about.js", 
    vendor: ["jquery", "tether", "bootstrap"] 
}; 

В plugins разделе:

scriptsPlugins.push(
    new webpack.optimize.CommonsChunkPlugin({ 
     name: "vendor", 
     filename:"vendor.bundle.js", 
     minChunks: 2 
    }), 
    ... 
})); 

Внутри 'index.html' Я нагрузить связки:

<script src="{{ url_for('static', filename='dist/js/vendor.bundle.js') + anti_cache_token }}"></script> 
<script src="{{ url_for('static', filename='dist/js/home.js') + anti_cache_token }}"></script> 

Внутри исходного каталога в blog_index.js Я использую jquery :

import $ from "jquery"; 

$(".home-click").click(function() { 
    alert("clicked from .home-click"); 
}); 

Результат:

• всё пучки без каких-либо ошибок.
• когда я нажимаю .home-clickalert box пожары как и ожидалось.
• проверки пакетных файлов, которые я вижу, что:
  • vendor.bundle.js содержит: jquery, tether и bootstrap.
  • Внутри, например, blog_index.js (после того, как он прошел через webpack 2), я заметил, что импорт jquery не входит в этот файл, но vendor.bundle.js (это как и ожидалось).

Однако, у меня есть следующий проблема когда я проверяю консоль браузера:

Я попробовал переключать порядок библиотек в этой строке vendor: ["jquery", "tether", "bootstrap"], но ничего не изменилось - ошибка все еще существует.

Знаете ли вы, как я могу решить эту проблему, желательно без использования дополнительных плагинов webpack?

Answer 1

javascript Bootstrap предполагает, что jQuery подключен к объекту window, он не требует его или что-то еще.

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

Добавьте к этому ваши плагины и вы должны быть в порядке

new webpack.ProvidePlugin({ 
    $: 'jquery', 
    jQuery: 'jquery', 
    'window.jQuery': 'jquery', 
    tether: 'tether', 
    Tether: 'tether', 
    'window.Tether': 'tether', 
}) 

Это заменит все случаи, когда jQuery предполагается как глобальные с экспортом пакета JQuery, который является jQuery объектом. То же самое для Tether