web-dev-qa-db-ja.com

select2をwebpackで使用するにはどうすればよいですか？

このコードを使用してselect2（ https://github.com/select2/select2 ）を要求すると、すべてのアセットを管理するためにwebpackを使用しています

$（...）。select2は関数ではありません。

require.ensure(['./vendors/select2'],function (require) {
    require('./site');
});

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

モジュールのエクスポートに何か問題があると思います。多くの検索を試みましたが、希望はありませんでした。

誰でも何をすべきか教えてください、それは私に約10時間かかりました。

ありがとうございました！

webpackjquery-select2select2
21
bnqtoan

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();
});
42
Everettss

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.エラーが発生します。

5
Adam Reis

Select2のsrcバージョンをロードします

Webpack開発者の一人であるSean Larkinは次のように述べています。

ほとんどのモジュールは、package.jsonのメインフィールドのdistバージョンをリンクします。これはほとんどの開発者にとって便利ですが、webpackでは依存関係をより最適化できるため、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用に設計された動的なrequireが機能しないためです。 _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"; } }などのオーバーライドも機能します。

コンテキストレスのrequireを無効にします

上記の手順では、正常に機能するselect2が提供されますが、Webpackは__Critical dependency: the request of a dependency is an expression_という文句を言います。これは、「webpackには現在のフォルダー内のすべてのファイルと子フォルダー内のすべてのファイルを含める必要がある」という意味です。2、これは_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");
_

ヒント

  1. 言語の問題を診断するときは、$.fn.select2.defaults.set('debug',true);をオンにします。
  2. アプリに$("html").removeAttr("lang");を追加して、奇妙な言語のデフォルトを避けます。
1
rohanc

このようにすることができます：

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


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