このコードを使用して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時間かかりました。
ありがとうございました!
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();
});
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.
エラーが発生します。
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"; } }
などのオーバーライドも機能します。
上記の手順では、正常に機能する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");
_
$.fn.select2.defaults.set('debug',true);
をオンにします。$("html").removeAttr("lang");
を追加して、奇妙な言語のデフォルトを避けます。このようにすることができます:
import $ from 'jquery';
import 'select2';
$('selector').select2(); //selector can be className, ID, tag name , attributeName , etc ...