如何在 webpack 中使用 select2？答案

【问题标题】：How to use select2 with webpack?如何在 webpack 中使用 select2？
【发布时间】：2016-12-23 09:54:24
【问题描述】：

我已经通过以下方式下载了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 不兼容吗？

【问题讨论】：

【解决方案1】：

你在哪里看到这是如何使用select2的？据我看项目，您需要将jquery 安装为一个部门，但之后它将是automatically required。

查看导出函数的签名，它看起来可能需要一个 jQuery 元素和选项：https://github.com/select2/select2/blob/master/dist/js/select2.js#L5052

但是在导入它之后，它应该只是作为插件附加到 jQuery，所以我认为$('.some-element').select2([options]); 也可以。

那么您是否只是尝试了require('select2')（如果您没有尝试过npm i jquery --save）？

【讨论】：

当然我有jquery，我觉得提这个太明显了。问题是一些 jquery 插件包装在 UMD 中，如果我使用 AMD、CommonJS 或不使用它，它会进行一些奇怪的检查，而这个检查在 Webpack 中会中断，因为 Webpack 支持这两者，所以 UMD 包装器假设我使用 AMD，即使我使用 commonJS。在 #4 接受的答案中有一个 hacky workaround。

【解决方案2】：

如果有人正在寻找这个只是做 require('select') 不会将它附加到 jquery 你必须require('select2')(); 然后你可以打电话

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

那么它将起作用。现在我已经用电子 js 测试了这个。它正在工作！

在我的文档中，这是我首先导入所有内容的方式 jquery 然后 select2

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

【讨论】：