[英]How to use jQuery plus plugins and dependent libraries with Webpack
I am trying to understand how to port an existing set of code to Webpack. 我试图了解如何将现有的代码集移植到Webpack。 Here's my scenario:
这是我的情景:
I'm using jQuery with Bootstrap, KendoUI, Mockjax, some jQuery plugin-ish libraries (eg bootbox, jQuery BlockUI). 我正在使用jQuery与Bootstrap,KendoUI,Mockjax,一些jQuery插件库(例如bootbox,jQuery BlockUI)。 Previously (using requireJS), I was able to specify these dependencies in an array in the 'require' of my main app js, and everything was tied together nicely.
以前(使用requireJS),我能够在我的主应用程序js的'require'中的数组中指定这些依赖项,并且所有内容都很好地捆绑在一起。 Like this:
像这样:
require(['dep1','dep2','...'],function(Dep1,Dep2,...) {do stuff});
Using Webpack I've encountered a number of problems: 使用Webpack我遇到了很多问题:
When I turn on the 'chunking' feature, my mock endpoints no longer work 当我打开“分块”功能时,我的模拟端点不再有效
In one case, Webpack is creating a '0.js' file and I have no idea why, nor how to prevent it from doing so. 在一个案例中,Webpack正在创建一个'0.js'文件,我不知道为什么,也不知道如何阻止它这样做。
In various cases it appears there are two (?) copies of jQuery, such that handlers or references to Kendo widgets don't work anymore 在各种情况下,似乎有两个(?)jQuery副本,因此处理程序或对Kendo小部件的引用不再起作用
When I tried to convert some wrapper code from an AMD style (with a 'require' array followed by a function with formal params), I got numerous errors, such as Bootstrap not finding jQuery or everything appearing to load except none of the jQuery event listeners were working. 当我尝试从AMD样式转换一些包装器代码(带有'require'数组后跟带有正式参数的函数)时,我遇到了很多错误,例如Bootstrap没有找到jQuery或者除了jQuery事件之外没有任何东西出现加载听众在工作。
I've read a bunch of articles, and tried things like: 我读了很多文章,并试过这样的事情:
using the webpack.ProvidePlugin
in my Webpack config 使用
webpack.ProvidePlugin
在我的WebPack配置
putting an 'alias' to the unminified jQuery in the resolve
object of my Webpack config 在我的Webpack配置的
resolve
对象中为未明细化的jQuery添加“别名”
using the imports-loader?jQuery=jquery,$=jquery,this=>window
approach in my module: { loaders: {}}
Webpack config object 在我的
module: { loaders: {}}
使用imports-loader?jQuery=jquery,$=jquery,this=>window
方法module: { loaders: {}}
Webpack配置对象
using the imports-loader
approach in my main js in the require
在
require
主要js中使用imports-loader
方法
So far, nothing has worked completely. 到目前为止,一切都没有完全奏效。 I've gotten close, only to find (for example) that suddenly a Kendo widget doesn't seem to exist under the jQuery selection it previously was working under.
我已经接近了,只是发现(例如)突然一个Kendo小部件似乎不存在于之前正在进行的jQuery选择之下。
I'd like to understand how to make a bulletproof setup so that one and only one instance of jQuery exists, and everything that has jQuery as a dependency/relationship uses that instance everywhere in my code. 我想了解如何进行防弹设置,以便只存在一个jQuery实例,并且jQuery作为依赖关系/关系的所有内容在我的代码中的任何地方都使用该实例。 Further, I'd like to understand how such a thing can be accomplished while using the 'chunking' feature of Webpack.
此外,我想了解在使用Webpack的“分块”功能时如何完成这样的事情。 If I separate my Mockjax endpoints (for example) into a separate file, I want them to function for any AJAX call anywhere, be it via Kendo or jQuery.
如果我将我的Mockjax端点(例如)分离到一个单独的文件中,我希望它们可以在任何地方为任何AJAX调用运行,无论是通过Kendo还是jQuery。 If I define a Kendo widget (say, a dropdown) somewhere, I want to be able to get a handle to it from anywhere using the
$('.some-kendo-widget').data('kendoDropDownList)
approach. 如果我在某处定义了一个Kendo小部件(比如一个下拉列表),我希望能够使用
$('.some-kendo-widget').data('kendoDropDownList)
方法从任何地方获取它。
I'm happy to read more articles if someone has links; 如果有人有链接,我很乐意阅读更多文章; I've searched and searched, and just don't seem to have the right vocabulary to find what I need.
我进行了搜索和搜索,似乎没有合适的词汇来找到我需要的东西。 Surely someone else has faced this though.
当然其他人也面临过这个问题。
For legacy libraries like jQuery UI which rely on a global jQuery we've had to use the ProvidePlugin
: 对于依赖于全局jQuery的jQuery UI这样的遗留库,我们必须使用
ProvidePlugin
:
new webpack.ProvidePlugin({
$: 'jquery',
jQuery: 'jquery',
'window.jQuery': 'jquery',
}),
But I'm just sort of grasping at straws here, good luck! 但我在这里只是抓住稻草,祝你好运!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.