[英]Webpack bundle - Bootstrap's JavaScript requires jQuery
I am trying to achieve the following: 我想要实现以下目标:
bundle
( in this order ) jquery
, tether
, and bootstrap.js
. bundle
( 按此顺序 ) jquery
, tether
和bootstrap.js
。 HTML
page and beneath it load other page specific scripts. HTML
页面中加载此包,在其下方加载其他页面特定的脚本。 To achieve this I am using webpack 2
and the CommonsChunkPlugin
. 为实现这一点,我使用
webpack 2
和CommonsChunkPlugin
。 Here is my config. 这是我的配置。
For entries
I have: 对于我有的
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"]
};
In the plugins
section: 在
plugins
部分:
scriptsPlugins.push(
new webpack.optimize.CommonsChunkPlugin({
name: "vendor",
filename:"vendor.bundle.js",
minChunks: 2
}),
...
}));
Inside 'index.html' I load the bundles: 在'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>
Inside the source directory in the blog_index.js
I make use of jquery
: 在
blog_index.js
的源目录blog_index.js
我使用了jquery
:
import $ from "jquery";
$(".home-click").click(function () {
alert("clicked from .home-click");
});
The result: 结果:
.home-click
the alert box
fires as expected. .home-click
alert box
按预期激发。 vendor.bundle.js
contains: jquery
, tether
, and bootstrap
. vendor.bundle.js
包含: jquery
, tether
和bootstrap
。 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). blog_index.js
(在通过webpack 2
运行之后),我注意到jquery
导入没有捆绑在这个文件中,而是vendor.bundle.js
(这是预期的)。 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. 我尝试在这个行
vendor: ["jquery", "tether", "bootstrap"]
切换库的顺序vendor: ["jquery", "tether", "bootstrap"]
,但没有任何改变 - 错误仍然存在。
Do you know how can I solve this, preferably without using additional webpack
plugins? 你知道我怎么能解决这个问题,最好不要使用额外的
webpack
插件?
Bootstrap's javascript assumes that jQuery is hooked on the window
object, it does not require it or anything. Bootstrap的javascript假设jQuery挂在
window
对象上,它不需要它或任何东西。
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.
所以bootstrap代码找不到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. 这将替换
jQuery
被假定为全局的所有实例,并导出jQuery包,即jQuery
对象。 Same for Tether
Tether
相同
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.