Amy Hirschi über Unsplash

So verwenden Sie Garnarbeitsbereiche mit Create React App und Create React Native App (Expo), um gemeinsamen Code gemeinsam zu nutzen

Das Ziel dieses Tutorials ist es, ein Monorepo zu erstellen, das Garnarbeitsbereiche verwendet, um gemeinsamen Code in einer Create React App (CRA) und einer Create React Native App (CRNA / Expo) gemeinsam zu nutzen.

Derzeit gibt es einige Probleme mit den Projekten, bei denen diese Problemumgehungen nicht mehr benötigt werden:

  • Facebook / Metro # 1,
  • react-community / create-react-native-app # 232,
  • react-community / create-react-native-app # 340,
  • react-community / create-react-native-app # 408,
  • facebookincubator / create-react-app # 3405,
  • facebookincubator / create-react-app # 3435,
  • Garnpkg / Garn # 3882.

Einige der folgenden Lösungen können auch für Lerna-Setups hilfreich sein.

Voraussetzungen

Stellen Sie sicher, dass Sie Node ~ Version 8 und mindestens Garn 1.3.0 ausführen und die App "create-react-app" und "create-react-native-app" installiert haben.

Arbeitsbereiche einrichten

In diesem Handbuch richten wir vier Ordner ein, können sie jedoch nach Belieben strukturieren:

  • Web das CRA-Projekt,
  • Native das CRNA-Projekt,
  • gemeinsame Kernlogik und
  • Ansichten für die gemeinsame Benutzeroberfläche.

Erstellen Sie einen neuen Ordner, in dem sich Ihre Arbeitsbereiche befinden sollen, und fügen Sie eine package.json hinzu, die wie folgt aussieht:

{
  "privat": wahr,
  "Arbeitsbereiche": [
    "Netz",
    "native",
    "Ader",
    "Ansichten"
  ]
}

Für den Rest dieses Handbuchs wird davon ausgegangen, dass dieser Ordner als Arbeitsbereiche bezeichnet wird und sich in Ihrem Ausgangsverzeichnis befindet. Wir werden es als ~ / workspaces bezeichnen.

Setup-Kern

Kern in unserem Beispiel wird nur ein leeres Projekt sein. Erstelle einen Core-Ordner und füge diese package.json ein:

{
  "name": "core",
  Version: 0.0.1
}

Legen wir ein paar Beispieldateien als Test ab. Wir werden auch die projektspezifischen Erweiterungen in Web und Native nutzen.

test.js:

Wert aus './Wert' importieren
Standardwert exportieren

value.native.js:

Standardwert in native exportieren

value.web.js:

Standardwert im Web exportieren

Setup-Ansichten

Wir werden Views für unsere Benutzeroberfläche verwenden. Wenn Sie React direkt verwenden möchten, können Sie dennoch von diesem Ordner profitieren, indem Sie gemeinsam genutzte Komponenten in Ihren Projekten hier ablegen. Ansonsten überspringen Sie einfach diesen Abschnitt.

Ansichten ist, wo unsere Benutzeroberfläche sitzt. Erstelle einen Views-Ordner und füge diese package.json ein:

{
  "name": "views",
  Version: 0.0.1,
  "Skripte": {
    "native": "views-morph. --as reagieren-native --watch",
    "native: build": "views-morph. --as react-native",
    "web": "views-morph. --als reaktionsdom --watch",
    "web: build": "views-morph. --as react-dom"
  }
}

Dann füge den neuesten Views-Morph hinzu:

Garn hinzufügen - dev Ansichten-Morph

Fügen Sie eine Datei mit dem Namen Test.view hinzu:

Vertikal testen
backgroundColor deepskyblue
Rand 50
onClick RequisitenonClick
Text
Schriftgröße 28
Text Hey, ich bin ein Knopf!

Views verwendet einige CSS-Standardeinstellungen, die dem Rendern der Benutzeroberfläche durch React Native ähneln. Fügen Sie diese hinzu, indem Sie views.css nach src / index.css kopieren.

Views ist eine produktive Möglichkeit, um Schnittstellen mit Ihrem Designteam und dem Design in der Produktion zu erstellen. Wenn Sie mehr darüber erfahren möchten, wenden Sie sich an https://twitter.com/viewsdx oder nehmen Sie an der Konversation unter https://slack.viewsdx.com teil :).

Netz

Es gibt einige Probleme beim Ausführen der CRA-Init-Skripte im Arbeitsbereich. Wechseln Sie also zu einem beliebigen temporären Ordner und erstellen Sie ein neues Projekt:

# Zu einem temporären Ort gehen
cd / tmp
# mach die App
Erstellen-Reagieren-App-Web
# Knotenmodule und yarn.lock entfernen
rm -rf web / node_modules yarn.lock
# Verschiebe es in die Arbeitsbereiche
mv web ~ / workspaces
cd ~ / workspaces / web

Der nächste Schritt besteht darin, dass CRA Ihren anderen Arbeitsbereichscode kompiliert, wenn dieser von Ihrer App importiert wird.

Installieren Sie die Arbeitsbereiche "React-App-Re-Wire" und "React-App-Re-Wire-Garn" im Webprojekt:

Garn hinzufügen --dev React-App-ReWire React-App-ReWire-Garn-Arbeitsbereiche

Tauschen Sie die Skripte zum Starten, Erstellen und Testen in package.json folgendermaßen aus:

"start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test --env = jsdom",

Und fügen Sie eine Datei mit dem Namen config-overrides.js hinzu:

const rewireYarnWorkspaces = require ('react-app-rewire-yarn-workspaces');
module.exports = Funktionsüberschreibung (config, env) {
  return rewireYarnWorkspaces (config, env);
};

Fügen Sie Folgendes zu src / App.js hinzu, um die Verbindung mit core zu testen:

Test aus 'core / test' importieren
Alarm (Test)

Wenn Sie Views verwenden, testen Sie dies, indem Sie App.js folgendermaßen überschreiben:

importiere React, {Component} von 'react';
Importtest von 'core / test';
Test aus 'views / Test.view.js' importieren;
Alarm (Test);
Klasse App erweitert Komponente {
  render () {
    return  alert ('nur einen Knopf gedrückt!')} />;
  }
}
Standard-App exportieren;

Eingeborener

Es gibt einige Probleme beim Ausführen der CRNA-Init-Skripte im Arbeitsbereich. Wechseln Sie also zu einem beliebigen temporären Ordner und erstellen Sie ein neues Projekt:

# Zu einem temporären Ort gehen
cd / tmp
# mach die App
create-react-native-app native
# Knotenmodule und yarn.lock entfernen
rm -rf native / node_modules yarn.lock
# Verschiebe es in die Arbeitsbereiche
mv native ~ / arbeitsbereiche
cd ~ / workspaces / native

Wir müssen zuerst den Einstiegspunkt von CRNA austauschen, da die Art und Weise, wie CRNA unsere App.js aufnimmt, stark vom Speicherort der Dateien abhängt. Dies ist also einfacher. Wir werden diese Datei crna-entry.js nennen.

Holen Sie sich entweder die Originaldatei von hier. Wenn Sie dies tun, stellen Sie sicher, dass Sie die Import-App von '../../../../App' ändern. zum App-Import von './App'; So nimmt es Ihre App auf.

… Oder verwenden Sie diese Version, um zu vermeiden, dass Ihre App in eine Ansicht eingebunden wird. Fügen Sie eine Datei mit dem Namen crna-entry.js hinzu:

App aus './App' importieren;
Import Expo von "Expo";
importieren Reagieren von 'reagieren';
const AwakeInDevApp = requisiten => [
  ,
  process.env.NODE_ENV === 'development'? (
    
  ) : Null,
];
Expo.registerRootComponent (AwakeInDevApp);

Danach ersetzen Sie in package.json:

"main": "./node_modules/react-native-scripts/build/bin/crna-entry.js",

zum:

"main": "crna-entry.js",

Dann ersetze app.json dafür:

{
  "Messe": {
    "sdkVersion": "23.0.0",
    "ignoreNodeModulesValidation": true,
    "packagerOpts": {
      "config": "rn-cli.config.js",
      "projectRoots": ""
    }
  }
}

Beachten Sie, dass dieses Handbuch erstellt wurde, als das Expo-SDK v23.0.0 war. Wenn Ihre app.json eine andere Version hat, verwenden Sie diese stattdessen.

Installieren Sie die Arbeitsbereiche metro-bundler-config-yarn und crna-make-symlinks-for-yarn:

garn hinzufügen --dev metro-bundler-config-garn-arbeitsbereiche crna-make-symlinks-for-garn-arbeitsbereiche

Fügen Sie eine Datei mit dem Namen rn-cli.config.js hinzu:

const getConfig = require ('metro-bundler-config-yarn-workspaces')
module.exports = getConfig (__ dirname)

Fügen Sie eine Datei mit dem Namen link-workspaces.js hinzu:

require ('crna-make-symlinks-for-yarn-workspaces') (__ dirname)

Fügen Sie dem package.json Ihres nativen Projekts ein Prestart-Skript hinzu:

"prestart": "node link-workspaces.js",

Fügen Sie Folgendes zu App.js hinzu, um die Verbindung mit core zu testen:

Test aus 'core / test' importieren
Alarm (Test)

Wenn Sie Views verwenden, testen Sie dies, indem Sie App.js folgendermaßen überschreiben:

importiere React, {Component} von 'react';
Importtest von 'core / test';
Test aus 'views / Test.view.js' importieren;
Alarm (Test);
Klasse App erweitert Komponente {
  render () {
    return  alert ('nur einen Knopf gedrückt!')} />;
  }
}
Standard-App exportieren;

Wenn Sie eine Fehlermeldung wie "Eintragsdatei crna-entry.js kann in keinem der Stammverzeichnisse gefunden werden" erhalten, drücken Sie beim Starten des EXPO-Läufers die Tastenkombination UMSCHALT + R, um den Packager neu zu starten und den Cache zu leeren.

Ein Teil des Setups kann sich auch für React Native CLI als nützlich erweisen. Siehe diesen Kommentar. Ich möchte mich auch bei Neil Ding @GingerBear für seine Leistung bedanken, ohne die es keine U-Bahn-Bündler-Konfigurationsgarn-Arbeitsbereiche geben würde.

Bevor Sie die Apps starten ...

Zu diesem Zeitpunkt würde ich wahrscheinlich empfehlen, alle node_modules jedes Projekts zu löschen und von vorne zu beginnen:

cd ~ / arbeitsbereiche
rm -rf knotenmodule core / knotenmodule views / knotenmodule native / knotenmodule web / knotenmodule
Garn

Abhängigkeiten werden weiterhin zu den verschiedenen Projektordnern hinzugefügt.

Wenn Sie Views verwenden, müssen Sie den Morpher nach Projekttyp starten, bis viewsdx / morph # 31 implementiert ist.

Führen Sie für das Web im Ordner "views" Folgendes aus:

Garnbahn

Führen Sie für native im Ordner views Folgendes aus:

Garn native

Wir werden in Kürze einen parallelen Prozess-Runner wie den unter https://github.com/viewsdx/use implementierten anbieten.

Ich hoffe, der Prozess funktioniert für Sie! Hier ist das GitHub-Repo, das ein Beispielprojekt und die hier verwendeten unterstützenden Entwicklungspakete enthält. Wenn Sie Probleme finden oder Vorschläge zu bestimmten Schritten haben, können Sie diese hier kommentieren oder ein Problem im Repo eröffnen.

Vielen Dank an Larissa und Neil für ihre Hilfe.

Viel Spaß beim Hacken!