Verwenden von MaterializeCSS mit Webpack - Kann das Modul 'hammerjs' nicht lösen

Ich baue ein Projekt mit Webpack. Das Projekt verwendet materializecss. Als ich materialize.js den Eintrag Datei hinzufügen, beschwert es mit dem Fehler unter Cannot resolve module 'hammerjs'Verwenden von MaterializeCSS mit Webpack - Kann das Modul 'hammerjs' nicht lösen

Wenn ich die Datei öffnen, ich dort die Definition sehen kann, aber es scheint, webpack nicht in der Lage ist, sie zu identifizieren. Das selbe gilt für weakmap in knockout-es6. Meine Lösung dazu war, einen Verweis auf hammer.min.js in resolve.alias hinzufügen, aber nicht sicher, ob das die richtige Sache zu tun ist.

Wie bekomme ich webpack, um diese Abhängigkeiten zu erkennen, wenn sie zusammen mit der betreffenden Bibliothek gebündelt sind - in diesem Fall materialize.js?

Quelle

2015-05-08 ritcoder

Haben Sie 'hammerjs' als eine Abhängigkeit zu einem Projekt installiert ist (dh.' Npm i hammerjs --save')? Wenn ja, sollte Webpack es aufnehmen können, solange es sich in [resolve.modulesDirectories] (https://webpack.github.io/docs/configuration.html#resolve-modulesdirectories) befindet. –

@bebraw Es hat funktioniert. Bedeutet das nicht, dass ich 'Hammerjs' habe? Heißt das, 'hammerjs' ist zweimal geladen? Eine aus dem NPM-Paket und die andere, die in materialize.js eingebettet ist. – ritcoder

Ich erweiterte meinen Kommentar in eine Antwort mit einigen zusätzlichen Informationen. –

Solange Sie hammerjs in Ihrem Projekt installiert haben (dh npm i hammerjs --save), sollte es es finden. Wie von @egunays darauf hingewiesen, sollten Sie auch import 'expose?Hammer!hammerjs/hammer Zugriff auf Hammer Objekt haben.

Falls Sie sich wegen möglicher Duplizierung Sorgen machen (Sie können dies überprüfen, indem Sie das generierte Paket untersuchen), können Sie webpack.optimize.DedupePlugin verwenden. webpack.optimize.CommonsChunkPlugin kann auch nützlich sein. Dadurch können Sie Ihren App-Code von einem Anbieterpaket trennen.

Weitere Informationen finden Sie unter official optimization docs.

Quelle

2015-05-09 09:06:14

Danke @bebraw. Ich überprüfe die Optimierung. – ritcoder

Ich musste diese Zeile hinzufügen, damit es funktioniert: 'import 'aussetzen? Hammer! Hammerjs/hammer'; – eguneys

@eguenys, Danke! Ich fügte dieses Bit der Antwort hinzu. –

Es ist besser ProvidePlugin dafür zu verwenden.

new webpack.ProvidePlugin({ 
    $: "jquery", 
    jQuery: "jquery", 
    "Hammer": "hammerjs/hammer" 
}),

Dies bedeutet keinen zusätzlichen Lader erfordern und in der Dokumentation tatsächlich empfohlen:

Es gibt Fälle, in denen Sie ein Modul wollen sich auf den globalen Kontext zu exportieren. Tun Sie das nicht, wenn Sie das wirklich brauchen. (Bessere Nutzung der ProvidePlugin) 1

Quelle

2015-08-26 19:36:42

Verwenden von MaterializeCSS mit Webpack - Kann das Modul 'hammerjs' nicht lösen

Antwort

Verwandte Themen