如何在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 版本

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!

我发现我可以使用import-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适配器文档假设您将使用提供的 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);诊断语言问题时打开。
2. 通过添加$("html").removeAttr("lang");到您的应用程序来避免奇怪的语言默认值。