Webpack bundle - Bootstrap的JavaScript需要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的源目錄blog_index.js我使用了jquery ：

import $ from "jquery";

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

結果：

• 一切捆綁沒有任何錯誤。
• 當我點擊.home-click alert box按預期激發。
• 檢查捆綁的文件我看到：
  • vendor.bundle.js包含： jquery ， tether和bootstrap 。
  • 在內部查看，例如， blog_index.js （在通過webpack 2運行之后），我注意到jquery導入沒有捆綁在這個文件中，而是vendor.bundle.js （這是預期的）。

但是，當我檢查瀏覽器控制台時，我有以下問題 ：

我嘗試在這個行vendor: ["jquery", "tether", "bootstrap"]切換庫的順序vendor: ["jquery", "tether", "bootstrap"] ，但沒有任何改變 - 錯誤仍然存​​在。

你知道我怎么能解決這個問題，最好不要使用額外的webpack插件？

Answer 1

Bootstrap的javascript假設jQuery掛在window對象上，它不需要它或任何東西。

通過捆綁東西，您不會將變量暴露給全局范圍，或者至少您不應該這樣做。 所以bootstrap代碼找不到jQuery。

將它添加到你的插件，你應該沒問題

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

這將替換jQuery被假定為全局的所有實例，並導出jQuery包，即jQuery對象。 Tether相同