我如何将 select2 与 webpack 一起使用？

Question

我正在使用 webpack 来管理我的所有资产，当我使用此代码要求 select2 (https://github.com/select2/select2) 时出现错误

$(...).select2 is not function.

require.ensure(['./vendors/select2'],function (require) {
    require('./site');
});

// site.js
(function ($) {
    $(document).ready(function () {
        $(".js-1example-basic-single").select2();
    });
})(jQuery);

我认为模块导出有问题。我尝试了很多搜索但没有希望。

任何人都请告诉我该怎么做，我花了大约 10 个小时。

谢谢！

Answer 1

您可以运行 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();
});

Answer 2

对于任何使用 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. 错误。

Answer 3

你可以简单地这样做：

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


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

Answer 4

加载 Select2 的 src 版本

Webpack 开发人员之一 Sean Larkin 说：

Most modules link the dist version in the main field of their package.json. While this is useful for most developers, for webpack it is better to alias the src version because this way webpack is able to optimize dependencies better...¹

按照这个建议，我更愿意在 src 文件夹下获取文件：

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

静态加载语言文件

然后您会发现需要克服各种 language-related 障碍。一旦你 insert $(".dropdown").select2() 进入你的代码，你就会看到 Uncaught Error: Cannot find module './i18n/en'。这是因为为 RequireJS 设计的动态要求不起作用。它来自 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"; } } 之类的覆盖也有效。

禁用无上下文要求

以上说明为您提供了一个有效的 select2，但 Webpack 会报错，Critical dependency: the request of a dependency is an expression。这意味着，"webpack needs to include all files inside the current folder and all files in child folders"²，这将是 select2/src/js/select2!

下的所有内容

我发现我可以使用 imports-loader 完全禁用翻译模块中的 require()，同时保持 define() 调用不变，这样它仍然可以进行导出。这是我的 webpack.config.js:

的摘录

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

编写自定义适配器

您可以使用webpack require() 各种组件来编写您自己的数据适配器。 select2 adapter documentation 假定您将使用提供的 Almond 加载程序（例如 $.fn.select2.amd.require），所以我花了一段时间才意识到我可以做这种事情：

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

提示

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

Answer 5

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

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

我如何将 select2 与 webpack 一起使用？

How can I using select2 with webpack?

jquery-select2

webpack

select2

加载 Select2 的 src 版本

静态加载语言文件

禁用无上下文要求

编写自定义适配器

提示