NodeJS 与 webpack jQuery.Deferred 异常：o(...).select2 is not a function TypeError: o(...).select2 is not a function答案

【问题标题】：NodeJS with webpack jQuery.Deferred exception: o(...).select2 is not a function TypeError: o(...).select2 is not a functionNodeJS 与 webpack jQuery.Deferred 异常：o(...).select2 is not a function TypeError: o(...).select2 is not a function
【发布时间】：2019-06-05 15:34:08
【问题描述】：

我正在修改我的应用程序以通过 gulp 使用 nodejs 和 browserify 来生成一个缩小的 js。
我已经从手动加载依赖项和手动更新切换到使用 npm 安装它们。

一切都很顺利，但是当我想安装 select2 时，它开始到处抛出错误。当我为 npm required() 文件移动已删除的手动更新文件时。

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:108384)
在 HTML 文档。 (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) 未定义

dropdown.module.js:53 Uncaught TypeError: o(...).select2 is not a function
在 i.init (dropdown.module.js:53)
在 i.sysInit (oc.foundation.base.js:157)
在我 (oc.foundation.base.js:20)
在新 i (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] (https://www.example.com/newstyle/js/closure.js?time=1559747711:1:108384)
在 HTML 文档。 (oc.foundation.base.js:213)
在 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：

$ = require('jquery');
require('select2');
$(document).ready(function(){
    $('select').select2();
});

当我在 index.js 文件中需要 select2 时，如何让它工作？

【问题讨论】：

标签： javascript jquery node.js jquery-select2 browserify

【解决方案1】：

我花了一些时间来拼凑这里出了什么问题。

归结为 Select2 使用它自己的加载器和工厂函数来初始化自身，默认情况下不会调用它。您需要手动调用它。

如果你有一个窗口对象并注册了 jQuery 到窗口对象，你可以在你的主 javascript 文件中按如下方式调用 Select2 一次：

window.$ = window.jQuery = require('jquery);
require('select2')();

或者如果您更喜欢变量而不是直接调用 require 上的函数：

window.$ = window.jQuery = require('jquery);
var select2Initialisator = require('select2');
select2Initialisator();

如果您喜欢使用范围或不同版本的 jQuery，您还可以将您希望注册 select2 的 jQuery 实例传递给 select2 工厂构造函数，如下所示

 var jQuery = require('jquery');
 require('select2')(jQuery);

【讨论】：