我如何在Webpack中使用select2？

Question

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

$（...）。select2不起作用。

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捆绑器加载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

加载Select2的src版本

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设计的动态需求无法正常工作。它来自loadPath中的translation.js功能：

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

在webpack中，这称为“要求表达式”。我的解决方案是通过先填充缓存来避免到达该行。在我的应用代码中，我输入：

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需要包括当前文件夹中的所有文件和子文件夹中的所有文件” ²，这将是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假设您将使用类似提供的杏仁加载程序（例如$.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);。
2. 通过将$("html").removeAttr("lang");添加到您的应用程序中，避免使用默认语言。

Answer 4

您可以简单地这样做：

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


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