Create-React-App in ein Elektron integrieren

Question

Ich versuche, nicht zu oft auf StackOverflow zurückzugreifen, aber das macht mich verrückt. Ich habe eine create-react-app, die ich in das Elektronengerüst einbinden möchte. Ich habe ein Online-Tutorial entdeckt, das im Grunde genommen alles von Grund auf mit einem Barebones-Webpack-Konfigurations-Setup erstellt hat, und es funktioniert, aber nur wenn der Webpack-Dev-Server gestartet wird, bevor die Elektronenanwendung gestartet wird. Dies ist überflüssig, wenn Sie die Anwendung packen möchten, da das Startskript package.json nur einen Befehl ausführt, der "electron." Lautet. Wie gehe ich also vor, um die statischen Produktionsdateien meiner React App in Electron zu integrieren? Ich habe es mehrere Male vorher ohne Erfolg versucht, und das nächste, was ich kam, zeigte (in der main.js Eingabedatei für Elektron) auf meine statische react index.html Datei. Das einzige Problem war, weil es ein Produktionsbau war, alles wurde minimiert. Damit die Ressourcen in dieser Datei korrekt geladen werden können, musste ich manuell das erste "/" von jeder src-URL entfernen (Sie können sehen, wie schnell das mit größeren Apps ziemlich umständlich wird).

Also ich denke, meine eigentliche Frage ist:

Wie kann ich „dienen“ die statischen Dateien meiner reagieren Anwendung so Elektronen lädt sie richtig?

(Nehmen Sie auch zur Kenntnis, dass ich die Anwendung, um ausgeworfen Verwendung von CSS-Module zu machen)

PS: Link zum reagieren Elektron-Tutorial - https://medium.com/@Agro/developing-desktop-applications-with-electron-and-react-40d117d97564

Answer 1

Durch die Logik des Tutorials haben Sie Um die statischen Dateien in den Ordner /public zu legen, werden die Assets relativ aus dem HTML-Dokument geladen. Dies führt jedoch zu dem gleichen Problem mit den Pfaden, bei denen Sie das erste "/" manuell aus einer src-URL entfernen mussten. Die URL muss beim Erstellen korrekt sein.

Das sagte ich denke, das Tutorial fördert schlechte Praxis für die Elektronenentwicklung, und ich denke, das ist ein Teil des Problems, das Sie haben.

Sie würden niemals Elektron aus dem node_modules-Pfad starten. Sie tun dies durch electron ./path/to/electronscriptsfolder Dies wird eine index.js/main.js in diesem Ordner mit den App-Definitionen laden.

Webpack ist die falsche Approche für Elektron, da Sie keine Bündelung benötigen und beim Packen von Elektronen neigt webpack dazu, Probleme mit nativen Paketen und Pfaden zu erzeugen (wie Sie selbst beschrieben haben). Sie würden electron-compile oder eine gulp Pipeline verwenden, um es durch Ihre elektronenspezifische Logik zu tun.

Es gibt keine Babel-Konfiguration, obwohl sie für Elektronen sehr wichtig sind. Im Grunde benötigt man zwei Bable-Konfigurationen, eine für Elektron, die auf einer spezifischen Knotenversion läuft und eine für das Chrom, das auf einer spezifischen Implementierung läuft.

Hier ist ein Beispiel für die Elektronen 1.8.1, die verwendet Chrome 59 und Node.js 8.2.1

Renderprocess

{ 
    "presets": [ 
    ["env", { 
     "targets": { 
     "chrome": "59" 
     } 
    }] 
    ] 
} 

Mainprocess

{ 
    "presets": [ 
    ["env", { 
     "targets": { 
     "node": "8.2.1" 
     } 
    }] 
    ] 
}