Webpack bundle - Bootstrap 的 JavaScript 需要 jQuery [英] Webpack bundle - Bootstrap's JavaScript requires jQuery

问题描述

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

• bundle(按此顺序)jquery、tether 和 bootstrap.js.
• 在 HTML 页面中加载此包，并在其下方加载其他页面特定的脚本.

为了实现这一点，我使用了 webpack 2 和 CommonsChunkPlugin.这是我的配置.

对于条目，我有:

const scriptsEntry = {blog_index: SRC_DIR + "/js/pages/blog_index.js",blog_about: SRC_DIR + "/js/pages/blog_about.js",供应商:[jquery"，系绳"，引导程序"]};

在 plugins 部分:

scriptsPlugins.push(新的 webpack.optimize.CommonsChunkPlugin({名称:供应商"，文件名:"vendor.bundle.js",最小块数: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("从 .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 插件?

解决方案

Bootstrap 的 javascript 假定 jQuery 挂在 window 对象上，它不需要它或任何东西.

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

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

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

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

也一样

I am trying to achieve the following:

• bundle (in this order) jquery, tether, and bootstrap.js.
• load this bundle within a HTMLpage and beneath it load other page specific scripts.

To achieve this I am using webpack 2 and the CommonsChunkPlugin. Here is my config.

For entries I have:

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

In the plugins section:

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

Inside 'index.html' I load the bundles:

<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>

Inside the source directory in the blog_index.js I make use of jquery:

import $ from "jquery";

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

The result:

• everything bundles without any errors.
• when I click .home-click the alert box fires as expected.
• checking the bundled files I see that:
  • vendor.bundle.js contains: jquery, tether, and bootstrap.
  • looking inside, for instance, blog_index.js (after it was run through webpack 2), I notice that the jquery import is not bundled inside this file, but vendor.bundle.js (this is as expected).

However, I have the following problem when I check the browser console:

I tried switching the order of the libraries in this line vendor: ["jquery", "tether", "bootstrap"], but nothing changed--the error is still there.

Do you know how can I solve this, preferably without using additional webpack plugins?

解决方案

Bootstrap's javascript assumes that jQuery is hooked on the window object, it does not require it or anything.

By bundling stuff up, you do not expose variables to the global scope, or at least you should not be doing that. So the bootstrap code cannot find jQuery.

Add this to your plugins and you should be ok

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

This will replace all instances where jQuery is assumed as global with the export of the jQuery package, which is the jQuery object. Same for Tether

这篇关于Webpack bundle - Bootstrap 的 JavaScript 需要 jQuery的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！