Ich möchte create-react-app verwenden, ohne meine Relay-App auszuwerfen.
Laut Relay-Dokumentation benötige ich babel-relay-plugin . Das relay-starter-kit konfiguriert dies in einem .babelrc .
Was wäre der einfachste Weg, dies zu erreichen? Gibt es eine Möglichkeit, relay ohne Auswerfen zu aktivieren?
Eine Option besteht darin, eine eigene Verzweigung von react-scripts zu erstellen, die babel-relay-plugin zu .babelrc hinzufügt. Das Erstellen einer Verzweigung von react-scripts wird als Methode dokumentiert # 3 in diesem Medium Post . Sie können die Verzweigung als Paket im Umfang von npm veröffentlichen und dann beim Erstellen Ihrer React-App verwenden: create-react-app my-app --scripts-version @scope/react-scripts .
Eine andere Option, die einige bevorzugen könnten, ist react-app-rewired : Ссылка - Ich habe das nicht untersucht Ich selbst noch, aber es scheint wie ein anderer guter Weg, es zu tun, der möglicherweise die Notwendigkeit verringern könnte, eine Abzweigung von react-scripts beibehalten zu behalten.
Wenn Sie Ihre eigene Verzweigung von react-scripts nicht beibehalten möchten, können Sie einfach Folgendes tun:
babel-plugin-relay
./setup.js file im Stammverzeichnis Ihres Projekts package.json , um node setup first Für ein vollständiges Relay Modern + React App erstellen Beispiel (einschließlich Routing) besuchen Sie:
kriasoft / react-static-boilerplate auf GitHub
Wie in Ссылка zwischen @gaearon und @josephsavona vom Staffelteam besprochen, würden sie gerne Relay-Unterstützung in create-react-app nach release 2 zurücksetzen.
Da die Veröffentlichung von Staffel 2 bereits in Sicht ist, würde ich in der Zwischenzeit vorschlagen, einen einfachen Hack zu verwenden, um Unterstützung für create-react-app hinzuzufügen und auf ihre offizielle Veröffentlichung zu warten.
So, jetzt können Sie:
Füge babel-plugin-react-relay hinzu (vertraue mir, es ist einfacher einzurichten als babel- Relay-Plugin) zu Ihrem package.json devDependencies , richten Sie Ihren graphql-Endpunkt in package.json wie
ein "graphql": {
"request": {
"url": "http://localhost:8000/graphql"
}
},
Führen Sie dann yarn
Navigieren Sie zu ./ node_modules / react-scripts / config / webpack.config.dev.js , suchen Sie mit ⌘ + F
presets: [require.resolve('babel-preset-react-app')],
Fügen Sie die folgende Zeile unter presets :
plugins: [require.resolve('babel-plugin-react-relay')],
Wende auch cacheDirectory direkt nach der obigen Zeile mit:
cacheDirectory: false
Dies stellt sicher, dass das GraphQL-Schema jedes Mal von babel-plugin-react-relay korrekt referenziert wird. Und das ist kein Nachteil, da wir bald offizielle create-react-app mit Relay-Unterstützung verwenden werden:)
yarn start aus und es ist gut zu gehen Ich hoffe, dass Sie mit Relay ohne yarn run eject Ihren Code beginnen können. Und denken Sie daran, nach der Veröffentlichung auf offizielle Relay 2-basierte create-react-app zu migrieren (ich vermute, Sie müssen nichts tun)
Tags und Links reactjs graphql relayjs create-react-app