您可以通过以下方式运行select2：

import $ from 'jquery';
import 'select2';                       // globally assign select2 fn to $ element
import 'select2/dist/css/select2.css';  // optional if you have css loader

$(() => {
  $('.select2-enable').select2();
});

对于任何使用Parcel Bundler加载select2的人来说，简单地导入它是行不通的。
我不得不将其初始化为：

//Import
import $ from 'jquery';
import select2 from 'select2';

//Hook up select2 to jQuery
select2($);

//...later
$(`select`).select2();

如果没有连接调用并将jQuery传递到函数中，它就不会绑定并导致$(...).select2 is not function.错误。

加载Select 2的源版本

Sean Larkin是Webpack的开发者之一，他说：
大多数模块在package.json的主字段中链接dist版本。虽然这对大多数开发人员很有用，但对于webpack来说，最好使用src版本的别名，因为这样webpack能够更好地优化依赖项...1
按照这个建议，我更喜欢要求src文件夹下的文件：

require("select2/src/js/jquery.select2.js");
require('select2/src/scss/core.scss');

静态加载语言文件

然后你会发现有各种各样的语言障碍需要克服。一旦你把insert $(".dropdown").select2()输入到你的代码中，你会看到Uncaught Error: Cannot find module './i18n/en'。这是因为为RequireJS设计的动态require不起作用。它来自translation.js中的loadPath函数：

if (!(path in Translation._cache)) {
    var translations = require(path);
    Translation._cache[path] = translations;
}

在webpack的说法中，这被称为“require expression”。我的解决方案是通过先启动该高速缓存来避免到达该行。在我的应用程序代码中，我放置了：

const EnglishTranslation=require("select2/src/js/select2/i18n/en");
const Translation=require("select2/src/js/select2/translation");
Translation._cache["./i18n/en"]=EnglishTranslation;
Translation._cache["en"]=EnglishTranslation;

您需要为所有您想要使用的语言执行此操作。然后您可以使用文档中的语言功能，包括初始化期间的$.fn.select2.defaults.set('language',"en")或language: en。覆盖language: { noResults: function() { return "abc"; } }也可以工作。

禁用无上下文要求

上面的说明给予了你一个工作的选择2，但是Webpack会抱怨Critical dependency: the request of a dependency is an expression，这意味着，“Webpack需要包含当前文件夹中的所有文件和子文件夹中的所有文件“2，这将是select2/src/js/select2下的所有文件！
我发现我可以使用imports-loader来完全禁用翻译模块中的require()，同时保持define()调用不变，这样它仍然可以进行导出。

module: {
    rules: [
        {
            test: /select2\/src\/js\/select2\/translation\.js$/,
            use: {
            loader: "imports-loader",
            options: "require=>false"
        }
     ]
}

编写自定义适配器

你可以使用webpack来require（）不同的组件来编写你自己的数据适配器，select 2 adapter documentation假设你会使用类似于提供的Almond加载器（例如$.fn.select2.amd.require），所以我花了一段时间才意识到我可以做这样的事情：

var Utils = require("select2/src/js/select2/utils");
var ArrayAdapter = require("select2/src/js/select2/data/array");

提示

1.诊断语言问题时打开$.fn.select2.defaults.set('debug',true);。
1.通过向应用添加$("html").removeAttr("lang");来避免奇怪的语言默认值。

你可以简单地这样做：

import $ from 'jquery';
import 'select2';

$('selector').select2(); //selector can be className, ID, tag name , attributeName , etc ...

尝试了以上所有的解决方案，但我设法使用select2与webpack和rails6的唯一方法是添加脚本加载到包中，并使用它如下：

import 'select2';
import 'script-loader!select2/dist/js/select2.js';
import 'select2/dist/css/select2.css';

我有同样的错误，但使用Laravel 10和Vite，它解决了：

// Since I'm using admin-lte 🤷 included select2
import select2 from 'admin-lte/plugins/select2/js/select2';
select2(window, $);