Question

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

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

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

{{1}}

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

任何人都请告诉我该怎么做，我花了大约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

您可以简单地这样做：

<div id="particles-js"></div>

Answer 4

加载Select2的src版本

其中一位Webpack开发人员Sean Larkin说：

大多数模块在其package.json的主字段中链接dist版本。虽然这对于大多数开发人员很有用，但对于webpack，最好为src版本起别名，因为这样webpack可以更好地优化依赖关系... ¹

根据此建议，我希望在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");

提示

诊断语言问题时打开$.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';

如何在webpack中使用select2？

5 个答案:

加载Select2的src版本

静态加载语言文件

禁用无上下文要求

编写自定义适配器

提示