带有webpack jQuery的NodeJS.延迟的异常:o(...).select2不是函数TypeError:o(...).select2不是函数
我正在修改我的应用程序以使用nodejs，并通过gulp通过browserify生成一个缩小的js.
我已经从手动加载依赖关系和手动更新切换为使用npm安装它们.
I'm modifying my application to use nodejs and browserify via gulp to produce one minified js.
I've switched from loading dependencies manually and updating manually to installing them with npm.
一切都很顺利，但是当我想安装select2时，它开始到处抛出错误.当我为npm required()文件移动了已删除的手动更新文件时.
Everything went smooth, but when I wanted to install select2 it started throwing errors all over the place. When I moved my removed manual updated file for the npm required() file.
jquery.js:3841 jQuery.Deferred异常:o(...).select2不是函数TypeError:o(...).select2不是函数
在i.init( https://www.example .com/newstyle/js/closure.js?time = 1559747711:1:5612 )
在i.sysInit( https://www.example .com/newstyle/js/closure.js?time = 1559747711:1:108153 )
在我( https://www.example.com /newstyle/js/closure.js?time=1559747711:1:106602 )
在新的我( https://www.example. com/newstyle/js/closure.js?time = 1559747711:1:5333 )
在HTMLSelectElement处. ( https://www.example.com/newstyle /js/closure.js?time=1559747711:1:108496 )
在Function.each( https://www.example .com/newstyle/js/closure.js?time = 1559747711:1:200628 )
在_.fn.init.each( https://www.example.com/newstyle/js/closure.js?time=1559747711:1:199273 )
在_.fn.init.d.fn.(匿名函数)[作为FormDropdownHandler]( https://www.example.com/newstyle /js/closure.js?time=1559747711:1:108696 )
在HTMLDocument.dispatch( https://www.example .com/newstyle/js/closure.js?time = 1559747711:1:240241 )未定义
jquery.js:3841 jQuery.Deferred exception: o(...).select2 is not a function TypeError: o(...).select2 is not a function
at i.init (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:5612)
at i.sysInit (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:108153)
at i (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:106602)
at new i (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:5333)
at HTMLSelectElement. (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:108496)
at Function.each (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:200628)
at _.fn.init.each (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:199273)
at _.fn.init.d.fn.(anonymous function) [as FormDropdownHandler] (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:108384)
at HTMLDocument. (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:108696)
at HTMLDocument.dispatch (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:240241) undefined
dropdown.module.js:53未捕获的TypeError:o(...).select2不是函数
在i.init(dropdown.module.js:53)处
在i.sysInit(oc.foundation.base.js:157)
在我(oc.foundation.base.js:20)
在新的我(dropdown.module.js:19)
在HTMLSelectElement处. (oc.foundation.base.js:191)
在Function.each(jquery.js:367)
在_.fn.init.each(jquery.js:202)
在_.fn.init.d.fn.(/匿名函数)[作为FormDropdownHandler](
dropdown.module.js:53 Uncaught TypeError: o(...).select2 is not a function
at i.init (dropdown.module.js:53)
at i.sysInit (oc.foundation.base.js:157)
at i (oc.foundation.base.js:20)
at new i (dropdown.module.js:19)
at HTMLSelectElement. (oc.foundation.base.js:191)
at Function.each (jquery.js:367)
at _.fn.init.each (jquery.js:202)
at _.fn.init.d.fn.(/anonymous function) [as FormDropdownHandler] (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:108384)
at HTMLDocument. (oc.foundation.base.js:213)
at HTMLDocument.dispatch (jquery.js:5237)
我正在使用的代码是:
<select name="pickup_point">
<option value="1" >all work</option>
<option value="4" >no play</option>
<option value="5" >dull boy</option>
</select>
和javascript:
and the javascript:
$ = require('jquery');
require('select2');
$(document).ready(function(){
$('select').select2();
});
在index.js文件中需要select2时如何使它工作?
How can I get select2 working when I require it in the index.js file?
花点时间整理一下这里出了什么问题.
Took me a while to piece together what goes wrong here.
归结为Select2使用它自己的加载器和工厂函数来初始化自身，默认情况下不会调用它.您需要手动调用它.
It comes down to that Select2 uses it's own loader and factory function to initialize itself, which doesn't get called by default. You need to call it manually.
如果您有一个窗口对象并将jQuery注册到该窗口对象，则可以在主Javascript文件中按一次如下所示调用Select2:
If you have a window object and registered jQuery to the window object you can call Select2 as follows once in your main javascript file:
window.$ = window.jQuery = require('jquery);
require('select2')();
或者如果您更喜欢变量而不是直接在require上调用函数:
or if you prefer variables instead of calling the function on require directly:
window.$ = window.jQuery = require('jquery);
var select2Initialisator = require('select2');
select2Initialisator();
如果您想使用范围或不同版本的jQuery，还可以将要向其注册select2的jQuery实例传递给select2工厂构造函数，如下所示:
If you like to work with scopes or different versions of jQuery, you can also pass the jQuery instance you wish to register the select2 to, to select2 factory constructor as follows
var jQuery = require('jquery');
require('select2')(jQuery);