如何将 select2 与 webpack 一起使用？答案

【问题标题】：How can I using select2 with webpack?如何将 select2 与 webpack 一起使用？
【发布时间】：2016-11-23 05:09:24
【问题描述】：

我正在使用 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 个小时。

谢谢！

【问题讨论】：

标签： webpack jquery-select2 select2

【解决方案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();
});

【讨论】：

@bnqtoan 我已经在 webpackbin 中包含了正常工作的链接。
非常感谢您的帮助！ @Everettss
@Everettss 链接已失效。
@SizzlingCode 我刚刚创建了新的 webpackbin（并更新了答案）。
@这需要捆绑 jquery 吗？我正在将我的包加载到已经安装了 jquery 的站点中。所以它不是我捆绑的一部分。我在 loader.js 文件中尝试了import select2，但仍然得到select2 is not a function

【解决方案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. 错误。

【讨论】：

谢谢，在我的应用程序（Meteor）中，我必须像这样初始化：select2(window,$);

【解决方案3】：

你可以这样做：

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


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

【讨论】：

【解决方案4】：

加载Select2的src版本

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

大多数模块在 package.json 的 main 字段中链接 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 设计的动态需求不起作用。来自translation.js中的loadPath函数：

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 假设您将使用提供的 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"); 添加到您的应用中，避免使用奇怪的默认语言。

【讨论】：

【解决方案5】：

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

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

【讨论】：