Laden von jQuery-Plugins mit webpack 2

Question

Nachdem ich den größten Teil des Tages damit verbracht habe zu googeln und zu versuchen - ich habe es nicht zum Laufen gebracht und ich bin mir nicht sicher, was da fehlt.
ich schon arbeiten jQuery (und überprüft es funktioniert) in webpack.common.js:

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

Zum Beispiel habe ich eine "MetisMenu" Plugin, wo soll ich es konfigurieren?

Ich habe verschiedene Kombinationen von require/include in meiner app.module.ts versucht.
Wie (einschließlich sie zu einer konstanten/var zuweisen, aber Import/erfordern immer geben Sie diesen Fehler):

import 'metismenu'; 
jQuery(...).metisMenu is not a function 

import { metisMenu } from 'metismenu'; 
Cannot assign to read only property 'exports' of object '#<Object>' 

require ('metismenu'); 
Cannot assign to read only property 'exports' of object '#<Object>' 

import * as jQuery from 'jquery'; 
import "metismenu"; 
Cannot assign to read only property 'exports' of object '#<Object>' 

Answer 1

Sieht aus wie webpack.ProvidePlugin Globals irgendwie erklärt unveränderlich in Webpack macht 2.

Ich war nicht in der Lage jQuery von einem Modul zu ändern und dann die modifizierte jQuery auf der anderen Seite verwenden (durch das hören, das Hinzufügen einer jQuery Plugin, das seine eigene $ .fn hinzufügen.).

Ich schlage vor, Sie ein einzelnes erstellen definieren, dass die notwendigen jQuery-Plugins enthält „erfordert“, es funktionierte für mich, z.B .:

((root, factory) => { 
    // AMD. Register as an anonymous module. 
    define([ 
     'modernizr' 
    ], factory); 
})(this, (Modernizr) => { 

    // Do the requires here instead of doing it on the main file 

    // Fix broken $.animate so Slick can work with 
    require('./animatePolyfill'); 

    // Inject carousel there 
    require('slick-carousel'); 

    class Core extends PluginBase { 
    ... 

Answer 2

Sie, bevor Sie diese Version ausprobiert habe?

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

Answer 3

ich zu dem gleichen Problem konfrontiert wurde. Ich kann Jquery und externes Plugin nicht mit dem Webpack 2 bündeln.

Also habe ich teilweise mit externen Optionen von Webpack "gelöst".

I Link CDN-Bibliothek (jquery und andere jquery-Plugin).

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.9/semantic.min.js" crossorigin="anonymous"></script> 

I "Externen" Option auf meine webpack.config angeben

externals: { 
    jquery: 'jQuery' 
} 

und fügen Sie den ProvidePlugin

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

In der App-Datei importieren ich jquery und verwenden das Plugin wie dieses

import * as $ from 'jquery'; 
$('.accordion').accordion(); 

Ich freue mich, wenn mir jemand sagen kann, wie man jQuery mit Webpack 2 bündelt

Answer 4

Mit webpack 2 können Sie jetzt das Modul verwenden, um dies zu erreichen.

Installieren Sie zunächst aussetzen-loader:

npm install expose-loader --save-dev 

Dann, wenn Ihre Import ändern (oder erfordern) die folgende Syntax zu verwenden:

import "expose-loader?$!jquery";