加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

Webpack bundle – Bootstrap的JavaScript需要jQuery

发布时间:2020-12-18 00:19:54 所属栏目:安全 来源:网络整理
导读:我想要实现以下目标: bundle(按此顺序)jquery,tether和bootstrap.js. 在HTML页面中加载此包,在其下方加载其他页面特定的脚本. 为此,我使用webpack 2和CommonsChunkPlugin.这是我的配置. 对于我有的条目: const scriptsEntry = { blog_index: SRC_DIR + "/j
我想要实现以下目标:

> 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",vendor: ["jquery","tether","bootstrap"]
};

在插件部分:

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-点击警告框按预期触发.
>检查捆绑的文件我看到:

> vendor.bundle.js包含:jquery,tether和bootstrap.
>查看内部,例如,blog_index.js(在通过webpack 2运行之后),我注意到jquery导入没有捆绑在这个文件中,而是vendor.bundle.js(这是预期的).

但是,当我检查浏览器控制台时,我遇到以下问题:

我尝试在这个行供应商中切换库的顺序:[“jquery”,“tether”,“bootstrap”],但没有任何改变 – 错误仍然存??在.

你知道我怎么能解决这个问题,最好不要使用额外的webpack插件?

解决方法

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对象.同样的系绳

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读