Bearbeiten

Hermes unter Windows + macOS

Hermes

Die Hermes-Engine ist eine Open-Source-JavaScript-Engine, die von Facebook entwickelt wurde, um die Erstellung und Ausführung von React Native-Anwendungen zu optimieren.

Um mehr darüber zu erfahren, was es ist und wie man es verwendet, lesen Sie die Dokumentation von React Native dazu.

Hermes unter Windows

Hermes wird unter Windows unterstützt und bietet im Allgemeinen bessere Leistungseigenschaften als die Standard-Chakra-Engine.

Hermes für neue Projekte aktivieren

Hermes ist für React Native Windows-Projekte standardmäßig aktiviert.

Hermes in einem bestehenden Projekt verwenden

Setzen Sie die Eigenschaft UseHermes auf true in der Datei ExperimentalFeatures.props im Verzeichnis windows Ihres Projekts.

<PropertyGroup Label="Microsoft.ReactNative Experimental Features">
  ...
  <UseHermes>true</UseHermes>
</PropertyGroup>

Hermes deaktivieren

Um wieder Chakra zu verwenden, setzen Sie die Eigenschaft UseHermes auf false in der Datei ExperimentalFeatures.props im Verzeichnis windows Ihres Projekts.

<PropertyGroup Label="Microsoft.ReactNative Experimental Features">
  ...
  <UseHermes>false</UseHermes>
</PropertyGroup>

Bekannte Einschränkungen

• Die Hermes-DLL ist nicht von Microsoft signiert.

Hermes unter macOS

Hermes ist für React Native for macOS verfügbar, vorausgesetzt, Sie verwenden Version 0.62 oder höher. Um zu erfahren, wie Sie auf die neueste Version aktualisieren, lesen Sie den Abschnitt "Upgrading" im macOS Getting Started Guide.

Nachdem Sie auf die neueste Version von React Native for macOS aktualisiert haben, installieren und fügen Sie Folgendes hinzu:

1. Installieren Sie das npm-Paket yarn add 'hermes-engine-darwin@^0.4.3'
2. Fügen Sie (oder kommentieren Sie aus) die folgenden Pod-Abhängigkeiten zu Ihrem macOS-Ziel in Ihrer Podfile hinzu.
   

pod 'React-Core/Hermes', :path => '../node_modules/react-native-macos/'
pod 'hermes', :path => '../node_modules/hermes-engine-darwin'
pod 'libevent', :podspec => '../node_modules/react-native-macos/third-party-podspecs/libevent.podspec'

3. Führen Sie pod install aus.

Stellen Sie sicher, dass das Deployment-Ziel Ihres Zielsystems mindestens 10.14 beträgt, bevor Sie pod install ausführen.

Hermes Inspector

React Native for Windows mit der Hermes-Engine unterstützt die direkte Inspektion der JavaScript-Laufzeit mit Tools wie Chrome oder Edge devtools, dem VSCode debugger, Flipper usw. durch die Implementierung eines In-Process-Chrome-Debug-Protocol-Servers. Bitte beachten Sie, dass dies grundlegend anders ist als "Remote JS Debugging", das den JavaScript-Bundle in eine entfernte Chrome-Browser-Sitzung mit bidirektionaler Kommunikation über IPC-Kanäle lädt.

Wir teilen die Implementierung (Code und Design) wo immer möglich mit anderen Plattformen. Alle externen Endpunkte, APIs und Protokolle sollten identisch mit den React Native-Umgebungen auf anderen Plattformen sein. Daher erwarten wir, dass die meisten auf anderen Plattformen verfügbaren Tools unter Windows funktionieren. Aktuell haben wir jedoch nur mit Chrome und Edge devtools getestet.

Schritte zum Aktivieren des direkten Debuggings

1. Initialisieren Sie den React Native Host.
   • Schalten Sie DeveloperSupport ein.
   • Schalten Sie FastRefresh ein.
   • Schalten Sie WebDebugger aus.
   • Schalten Sie Direct Debugging ein.
2. Stellen Sie sicher, dass der Dev-Server läuft.
3. Starten Sie die Anwendung.

Nachdem die App gebootet ist:

4. Navigieren Sie zu edge://inspect im Edge-Browser oder chrome://inspect im Chrome-Browser.
5. Aktivieren Sie Discover network targets und konfigurieren Sie die Zielerkennungseinstellungen so, dass localhost:8081 (oder wo immer der Metro-Server läuft) eingeschlossen wird.
6. Innerhalb weniger Sekunden sollte "Hermes React Native" auf der Seite als Remote-Ziel erscheinen.
7. Klicken Sie auf den Link inspect, um die devtools-Seite zu starten.
8. Drücken Sie Ctrl+P, um Quelldateien zu öffnen und Breakpoints zu setzen.
9. Alternativ können Sie debugger-Anweisungen im Quellcode einfügen, um an bestimmten Stellen zu unterbrechen.

Um an Stellen während des Bootvorgangs zu unterbrechen, können Sie entweder:

• Fügen Sie Anweisungen in die Bootsequenz ein, um die Laufzeit anzuhalten und auf die Verbindung des Debuggers zu warten.

debugger;

• Setzen Sie einen Breakpoint und aktualisieren Sie den Bundle über den Dev Server. Die Laufzeit wartet dann darauf, dass der Debugger angehängt wird.

Schritte zur Aktivierung der Heap-Profilierung

Folgen Sie den Schritten 1-7 von oben, und dann:

1. Klicken Sie im Inspektor auf den Tab "Memory".
2. Heap-Snapshots und instrumentierte Allokationen sollten funktionieren.

Debugging/Profiling für Release-Builds aktivieren

Wir halten den Inspektor in Release-Builds standardmäßig deaktiviert. Wenn Sie Release-Builds debuggen oder profilieren möchten, setzen Sie die MSBuild-Eigenschaft EnableHermesInspectorInReleaseFlavor auf 'true', wenn Sie die Plattform mit dem run-windows-Befehl erstellen, d. h.:

npx react-native run-windows --msbuildprops EnableHermesInspectorInReleaseFlavor=true

Bekannte Probleme

1. Der CPU-Sampling-Profiler funktioniert derzeit nicht.