如何在Webpack中使用Select2？

Question

我已经通过以下方式将select2作为节点模块下载：

npm install select2

我将它包含在我的app.js中:

require('select2')($);

当我运行webpack时，没有错误，但当我打开应用程序时，出现以下情况：

Uncaught TypeError: Object.defineProperty called on non-object(…)

来自 select2.js：

S2.define('select2/core',[
  'jquery',
  './options',
  './utils',
  './keys'
], function ($, Options, Utils, KEYS) {
(...)
}

这是否是因为select2的模块包装器只能与AMD一起使用，不兼容CommonJS导致的？

- van_folmert

Answer 1

你在哪里看到了如何使用select2的说明？我从这个项目的一瞥中所能看到的是，你需要安装jquery作为一个依赖项，但然后它会被自动引入。

从导出函数的签名来看，它似乎可以接受一个jQuery元素和选项：https://github.com/select2/select2/blob/master/dist/js/select2.js#L5052 但是，在导入之后，它应该只是作为一个插件附加到jQuery上，所以我认为$('.some-element').select2([options]);也可以工作。

所以，你是否尝试过require('select2')（如果你还没有，可以执行npm i jquery --save）？

- Dominic

---

当然，我有jQuery，我觉得这个太显而易见了，没必要提及。问题在于一些jQuery插件被包装在UMD中，如果我使用AMD、CommonJS或没有其中任何一个选项，则会执行某些奇怪的检查，而且这个检查在Webpack中会出错，因为Webpack支持两种方式，所以UMD包装器假定我使用AMD，即使我使用CommonJS也是如此。在第4个被接受的答案中有一个“hacky”解决方法，详情请访问此处。 - van_folmert

Answer 2

如果现在有人正在寻找这个，只需执行 require('select') 是不会连接 jquery 的，你需要执行 require('select2')();，然后才能调用。

$(document).ready(()=>{
  $('.select2').select2()
})

然后它就能工作了。现在我已经用Electron JS测试过了。它可以正常运行！

在我的文档中，这是我如何先引入jQuery再引入Select2的。

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

- Thalinda Bandara