Wystawianie wtyczki jquery za pomocą pakietu Webpack

Question

Próbuję użyć bootstrap-daterangepicker z pakietem Webpack. W moim pliku widoku mam następujące:

define(function (require) { 
    require('bootstrap-daterangepicker'); 

    $('#daterangepicker').daterangepicker({ ... }); 
}); 

I webpack.config.js:

plugins: [ 
    new webpack.ProvidePlugin({ 
     $: 'jquery', 
     jQuery: 'jquery', 
     'window.jQuery': 'jquery' 
    }) 
] 

Wynika to w daterangepicker is not a function. Przyjrzałem się daterangepicker.js i wygląda na to, że $.fn.daterangepicker nie został poprawnie wyeksportowany. Jak to zrobić? Próbowałem użyć imports-loader, aby wymusić importowanie jQuery, ale to nie pomogło.

Answer 1

Podobno bootstrap-daterangepicker próbuje załadować własny jQuery. Dlatego $.fn.daterangepicker nie jest dostępny w 'my' jQuery. Byłem zmuszony bootstrap-daterangepicker zawierać mój jQuery z tej linii w webpack.config.js:

resolve: { 
    alias: { 
     'jquery': require.resolve('jquery'), 
    } 
} 

Answer 2

Opcja WebPack „resolve” mi nie pomóc, ale @ spacek33z komentarze doprowadzić mnie do uświadomienia sobie, że moja kątowa komponent związanej element nie był elementem jQuery, ale zwykłym elementem DOM. Powodem, dla którego Angular używał własnego jqLite w porównaniu do prawdziwego jQuery.

Wyszukiwanie, dlaczego Angular nie znalazł prawdziwej jQuery Znalazłem pytanie "Webpack: how to make angular auto-detect jQuery and use it as angular.element instead of jqLite?", które pomogło mi zrealizować potrzeby kątowe window.jQuery.

Więc to wydaje się być właściwa webpack.conf.js zaklęcie dla mnie:

new webpack.ProvidePlugin({ 
     'jQuery': 'jquery', 
    'window.jQuery': 'jquery', 
     'jquery': 'jquery', 
    'window.jquery': 'jquery', 
     '$'  : 'jquery', 
    'window.$'  : 'jquery' 
}),