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，
 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 src ={{url_for（'static'，filename ='dist / js / home.js'）+ anti_cache_token}}>< / script> 
  

在 blog_index.js 我使用 jquery ：

  import $ fromjquery ; 
 
 $（。home-click）。点击（function（）{
 alert（click from from.home-click）; 
}）; 
  

结果：





• 所有包都没有任何错误。


• 当我点击 .home-click code>警告框按预期触发


• 检查捆绑文件我看到：
  
  
  
  
  • vendor.bundle.js 包含： jquery ， tether 和 bootstrap 。
  
  
  • 在里面看，例如 blog_index.js （在通过 webpack 2 运行之后），我注意到 jquery import没有捆绑在里面这个文件，但 vendor.bundle.js （这是预期的）。
  
  

但是，当我查看浏览器控制台时，我有以下问题：

我尝试过在这行中排列图库的顺序 vendor：[jquery，tether，bootstrap] ，但没有改变 - 错误仍然存​​在。 / p>

您是否知道如何解决这个问题，最好不要使用额外的 webpack 插件？

$ b $引导程序的javascript假定jQuery被钩在窗口对象上，它不需要它或任何东西。

通过捆绑填充，您不会将变量公开到全局范围，或至少您不应该这样做。所以引导代码找不到jQuery。

将其添加到您的插件中，您应该可以

  new webpack.ProvidePlugin（{
 $：'jquery'，
 jQuery：'jquery'，
'window.jQuery'：'jquery'，
系绳：'tether'，
系绳：'tether'，
'window.Tether'：'tether'，
}）
  pre> 
 
 
这将替换所有实例，其中导出jQuery包时，$ code> 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屋！