storefront:build - node.js Migration von externen Modulen?

Shopware 6 (German) Programmierung
1

Hey Leute, ich möchte externe node.js Module im Storefront nutzen. Ich bekomme beim storefront:build immer Fehlermeldungen like:

Module not found: Error: Can't resolve 'rbush' in '/home/vagrant/shopware-dev/custom/plugins/MeinPlugin/src/Resources/node_modules/ol/renderer/canvas'

Das liegt daran, dass die Import-Pfade in den node.js Modulen selbst nicht relativ sind… also z.B.

import rbush from 'rbush';

müsste in meinem Plugin jetzt eigentlich

import rbush from '../../rbush/rbush';

sein…

Jedoch nutze ich genau die selben Module in meiner Backend-App, d.h. beim administration:build wird mein node_modules Ordner irgendwie indexiert oder migriert, weil ich dort keinen Fehler erhalte und auch wie erwartet die externen Module nutzen kann.

Hat jemand eine Idee wie ich das auch fürs storefront:build hin bekomme?

Alternative wäre jetzt den node_modules Ordner im Storefront zu erweitern, jedoch ist das nur Plan B.

VG

2

https://github.com/stefanpoensgen/SptecLazyload/tree/master/src/Resources/app/storefront

Hier findest du ein Beispiel wie ich es gelöst habe.

2 „Gefällt mir“
3

Okay das ist mir neu mit der webpack.config.js - bist du da von selbst darauf gekommen oder gibt es innerhalb von Shopware Beispiele oder Dokumentationen?

https://github.com/stefanpoensgen/SptecLazyload/blob/master/src/Resources/app/storefront/build/webpack.config.js

Aber super nice von dir! Ich checke das gleich mal am We aus und geb dir Feedback :slight_smile:

4

Hab im Code Hinweise gefunden und mich dann durch getestet :slight_smile:

params kannst du dir mit console.log mal ausgeben. Das wird dann hinterher mit dem Rückgabewert der Funktion gemerged.

 

2 „Gefällt mir“
5

@StefanPoensgen schrieb:

https://github.com/stefanpoensgen/SptecLazyload/tree/master/src/Resources/app/storefront

Hier findest du ein Beispiel wie ich es gelöst habe.

Sehr Cool, Danke. Das scheint grundsätzlich so zu funktionieren, allerdings nur wenn ich mein Theme/Plugin builde. Im HMR-Modus gehts leider nicht. Als Workaround hab ich jetzt alle Dependencies aus meinem ThemePlugin in meiner Vagrantbox mit in den Core installiert, ist aber auch keine Dauerlösung.

6

Hat wunderbar funktioniert. Jetzt habe ich eine weitere Frage: Ist es möglich aus einem npm Modul einen bestimmten Ordner in den asset Ordner vom Storefront zu schieben? In meinem Fall geht es um die Schriftarten (FontAwesome 5), die ich ansonsten redundant in den asset Ordner packen müsste. Ist halt ein Luxusproblem, aber das wäre schon echt nice. 

VG

7

@Moorleiche‍ Für die Storefront passt das bei mir auch, geht es bei dir auch für die Adminstration? Denn sobald ich es dort verwende - natürlich mit angepassten Pfad - zerschießt er die Kompilierung und core Module usw. werden nicht mehr gefunden. Bei dir auch? 

8

@ShapeAndShift‍ nein, administration:build ging bereits schon vorher ;) 

9

Also ich meine - Wenn du eine custom webpack config nutzt für die administration  Angry-Face

10

habe ich nich probiert, im administration:build hat es immer funktioniert wenn der node_modules-Ordner im Resources-Ordner liegt

11

Hey,

habe das gleiche Problem. Beim Bauen mit “storefront:build” funktioniert alles wie gewünscht. Thumb-Up
Was nicht funktioniert ist der HMR-Modus mit z. B. “storefront:hot-proxy”. Undecided

Hat jemand von euch da eine Lösung gefunden?

1 „Gefällt mir“