Как я могу использовать select2 с webpack?

Я использую 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 часов.

Спасибо!

Ответы

Ответ 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();
});

Ответ 2

Для тех, кто использует пакетный набор для загрузки select2, просто импортировать его не удалось.

Мне пришлось инициализировать его следующим образом:

//Import
import $ from 'jquery';
import select2 from 'select2';

//Hook up select2 to jQuery
select2($);

//...later
$('select').select2();

Без вызова hookup и передачи jQuery в функцию он не свяжет и не приведет к $(...).select2 is not function. ошибка.

Ответ 3

Вы можете просто сделать так:

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


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

Ответ 4

Загрузите src версию Select2

Шон Ларкин, один из разработчиков веб-пакетов, говорит:

Большинство модулей связывают версию dist в основном поле своего package.json. Хотя это полезно для большинства разработчиков, для веб-пакетов лучше использовать псевдоним src-версии, потому что таким образом веб-пакет может оптимизировать зависимости лучше... 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;
}

На языке вебпака это называется "требуется выражение". Мое решение состоит в том, чтобы никогда не достигать этой линии, предварительно заполнив кэш. В код моего приложения я положил:

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"; } } language: { noResults: function() { return "abc"; } } работают также.

Отключить контекстный запрос

Приведенные выше инструкции дают вам рабочий select2, но Webpack будет жаловаться, Critical dependency: the request of a dependency is an expression. Это означает, что "веб-пакет должен включать все файлы в текущей папке и все файлы в дочерних папках" 2 что будет все в 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 для запроса() различных компонентов для написания ваших собственных адаптеров данных. В документации к адаптеру select2 предполагается, что вы будете использовать что-то вроде поставляемого миндального загрузчика (например, $.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"); в ваше приложение.