Webpack 包 - Bootstrap 的 JavaScript 需要 jQuery

Question

我正在努力实现以下目标：

• bundle（按此顺序）jquery、tether 和 bootstrap.js。
• 在HTMLpage 中加载此捆绑包，并在其下方加载其他特定于页面的脚本。

为此，我使用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-click 时，alert box 会按预期触发。
• 检查捆绑的文件我看到：
  • vendor.bundle.js 包含：jquery、tether 和 bootstrap。
  • 查看内部，例如blog_index.js（在通过webpack 2 运行之后），我注意到jquery 导入没有捆绑在此文件中，而是vendor.bundle.js（这是预期的）。

但是，当我检查浏览器控制台时，我遇到了以下问题：

我尝试在vendor: ["jquery", "tether", "bootstrap"]这一行中切换库的顺序，但没有任何改变——错误仍然存​​在。

你知道我该如何解决这个问题，最好不要使用额外的webpack 插件吗？

Answer 1

Bootstrap 的 javascript 假定 jQuery 已连接到 window 对象，它不需要它或任何东西。

通过捆绑东西，您不会将变量暴露给全局范围，或者至少您不应该这样做。所以引导代码找不到 jQuery。

将此添加到您的插件中，您应该没问题

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

这将使用 jQuery 包的导出替换所有将 jQuery 假定为全局的实例，即 jQuery 对象。 Tether也一样