Webpack bundle – Bootstrap的JavaScript需要jQuery
我想要实现以下目标:
> bundle(按此顺序)jquery,tether和bootstrap.js. 为此,我使用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"); }); 结果: >一切捆绑没有任何错误. > vendor.bundle.js包含:jquery,tether和bootstrap. 但是,当我检查浏览器控制台时,我遇到以下问题: 我尝试在这个行供应商中切换库的顺序:[“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对象.同样的系绳 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- angularjs – 角度js工厂内的访问范围
- power shell命令导入AD域用户与批量导入AD域用户
- 【WebService】1.WebService概述和作用
- router.navigate不起作用(Angular6,延迟加载)
- 使用angularjs使用来自websocket的数据实时更新表
- angularjs – 等待角度的应用程序从幻影脚本完全渲染
- shell – Tmux创建窗口失败:使用中的索引:0
- 编程语言和shell编程基础
- twitter-bootstrap – 如何限制卡片组的列数?
- 解决vim写的Makefile报错:Makefile: missing separator(did