Webpack bundle - Bootstrap的JavaScript需要jQuery

Question

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

• let sUp = [toUpper c | c <- s]（按此顺序）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

Inside＆＃39; index.html＆＃39;我加载了包：

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

在<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"]插件吗？

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

也是如此