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我使用的源目录里面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对象上,它不需要它或任何东西.

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

将它添加到你的插件,你应该没问题

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

这将替换所有jQuery假定为全局的实例,并导出jQuery包,即jQuery对象.同样的Tether