Wie kann ich Assets außerhalb des „src'-Verzeichnisses in die Create React App importieren?

Relative Importe außerhalb des src-Verzeichnisses in create-react-app

Create-react-app erzwingt eine strenge Einschränkung gegen den Import von Assets von außerhalb das src-Verzeichnis. Diese Einschränkung wird über das ModuleScopePlugin implementiert, das verhindert, dass relative Importe die src-Verzeichnisgrenze überschreiten.

Ursache

Diese Einschränkung stellt sicher, dass alle anwendungsbezogenen Dateien innerhalb bleiben Das src-Verzeichnis sorgt für eine klare Trennung zwischen Code und anderen Projekten Assets.

Auswirkungen

Der Versuch, Dateien von außerhalb des src-Verzeichnisses zu importieren, z. B. durch den Zugriff auf Bilder aus dem öffentlichen Ordner, führt zu einer Fehlermeldung, die auf die ModuleScopePlugin-Einschränkung hinweist.

Inoffizielle Lösungen

Es gibt inoffizielle Lösungen Workaround-Lösungen, die Rewire nutzen, um die Webpack-Konfiguration zu ändern und das ModuleScopePlugin zu entfernen. Von diesem Ansatz wird jedoch abgeraten, da er die vom Plugin bereitgestellten Sicherheits- und Funktionserweiterungen schwächt.

Empfohlener Ansatz

Um das Problem zu lösen und gleichzeitig die Integrität der Erstellung aufrechtzuerhalten -react-app-Umgebung können Sie:

1. Assets verschieben nach src: Übertragen Sie die gewünschten Bilder oder andere Assets in das src-Verzeichnis.
2. Direkte URL aus öffentlichem Ordner verwenden: Greifen Sie direkt über deren URL auf Assets aus dem öffentlichen Ordner zu, anstatt sie zu importieren .

Vorteile des Imports aus src

Der Import aus src bietet mehrere Vorteile:

• Optimierte Chunks:Webpack bündelt Assets aus src optimal und sorgt so für eine optimale Ladeeffizienz.
• Reduzierte Paketgröße: Durch den Import aus src werden Duplikate vermieden im Build-Ordner, wodurch die Gesamtpaketgröße minimiert wird.

Das obige ist der detaillierte Inhalt vonWie kann ich Assets außerhalb des „src'-Verzeichnisses in die Create React App importieren?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!