Question

我试图了解如何将现有代码集移植到Webpack。这是我的情景：

我正在使用jQuery与Bootstrap，KendoUI，Mockjax，一些jQuery插件库（例如bootbox，jQuery BlockUI）。以前（使用requireJS），我能够在我的主应用程序js的'require'中的数组中指定这些依赖项，并且所有内容都很好地捆绑在一起。像这样：

require(['dep1','dep2','...'],function(Dep1,Dep2,...) {do stuff});

使用Webpack我遇到了很多问题：

当我打开“分块”功能时，我的模拟端点不再存在工作
在一个案例中，Webpack正在创建一个'0.js'文件，我不知道为什么，也不知道如何阻止它这样做。
在各种情况下，似乎有两个（？）jQuery副本，例如那些处理程序或对Kendo小部件的引用不再起作用
当我尝试从AMD风格转换一些包装代码时（使用我得到了'require'数组后跟一个带正式参数的函数）许多错误，例如Bootstrap没有找到jQuery或一切似乎加载，除了没有jQuery事件监听器工作

我读了很多文章，并试过像：

使用我的Webpack配置中的webpack.ProvidePlugin
在我的Webpack配置的resolve对象中为未分解的jQuery添加“别名”
在我的imports-loader?jQuery=jquery,$=jquery,this=>window Webpack配置对象中使用module: { loaders: {}}方法
在imports-loader

require

到目前为止，一切都没有奏效。我已经接近了，只是发现（例如）突然看来Kendo小部件在它之前正在进行的jQuery选择下似乎不存在。

要点：

我想了解如何进行防弹设置，以便只存在一个jQuery实例，并且jQuery作为依赖关系/关系的所有内容在我的代码中的所有地方都使用该实例。此外，我想了解在使用Webpack的“分块”功能时如何完成这样的事情。如果我将我的Mockjax端点（例如）分离到一个单独的文件中，我希望它们可以在任何地方为任何AJAX调用运行，无论是通过Kendo还是jQuery。如果我在某处定义一个Kendo小部件（比如一个下拉列表），我希望能够使用$('.some-kendo-widget').data('kendoDropDownList)方法从任何地方获取它的句柄。

如果有人有链接，我很高兴看到更多文章;我进行了搜索和搜索，似乎没有合适的词汇来找到我需要的东西。当然，其他人已经面对这个了。

Answer 1

对于依赖全局jQuery的jQuery UI等遗留库，我们必须使用ProvidePlugin：

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

但我只是在这里抓住稻草，祝你好运！

如何在Webpack中使用jQuery plus插件和依赖库

要点：

1 个答案: