React Setup

Verwendung

npx gtx-cli setup

Der gtx-cli setup Befehl richtet Ihr Projekt automatisch für die Übersetzung mit gt-next oder gt-react ein. Dies geschieht durch das Parsen des Dateibaums Ihres Projekts und die Verwendung von babel, um die <T> Komponente um statische Inhalte zu wickeln. Jeder dynamische Inhalt wird automatisch mit <Var> Komponenten umschlossen.

Dieser Befehl wird als Teil des init Setup-Assistenten ausgeführt. Zusätzlich kann dieser Befehl unabhängig über npx gtx-cli setup ausgeführt werden.

Dieser Befehl sollte einmal ausgeführt werden, wenn Sie Ihr Projekt zum ersten Mal internationalisieren. Bei nachfolgenden Änderungen sollten Sie den scan Befehl verwenden, um Ihr Projekt zu aktualisieren.

Siehe den scan Befehl für weitere Details.

src/app/Home.js

import { T, Var } from 'gt-next';  

export default function Home({ user }) {
  return (
    <div>
      <T id="app.home.0">
        Hello, world! My name is <Var>{ user.name }</Var>
      </T>
    </div>
  );
}

Wenn Ihr Projekt den Next.js App Router verwendet, fügt der setup Befehl eine <GTProvider> Komponente in die entsprechende layout.jsx Datei ein.

Parameter

Parameter	Beschreibung	Typ	Optional	Standard
`--src <paths>`	Durch Leerzeichen getrennte Liste von Glob-Mustern zum Abgleichen von Quelldateien. Sollte relativ zum Stammverzeichnis sein.	`string`	`true`	`[ 'src/*/.{js,jsx,ts,tsx}', 'app/*/.{js,jsx,ts,tsx}', 'pages/*/.{js,jsx,ts,tsx}', 'components/*/.{js,jsx,ts,tsx}', ]`
`--config <path>`	Der Pfad zur GT-Konfigurationsdatei	`string`	`true`	`"gt.config.json"`

Verhalten

Konfigurationsdatei

Beim ersten Ausführen des CLI-Tools wird versucht, eine gt.config.json-Datei im Stammverzeichnis Ihres Projekts zu erstellen. Diese Datei enthält Metadaten über Ihr Projekt, die zur Übersetzung Ihrer Inhalte verwendet werden.

Lesen Sie mehr über die gt.config.json-Datei hier.

Die `id`-Eigenschaft

Der Setup-Befehl bietet die Option, automatisch eindeutige IDs für Ihre <T>-Komponenten zu generieren. Dies ist nützlich für Projekte, die viele <T>-Komponenten verwenden und vermeiden möchten, jeder einzelnen manuell eine eindeutige ID zuweisen zu müssen.

Diese id ist nützlich, um spezifische Übersetzungen im Übersetzungseditor und in der Konsole zu referenzieren.

`<T>`-Injektionsverhalten

Grundlegender Fall

Die CLI wird JSX-Elemente auf der höchstmöglichen Ebene umschließen. Das bedeutet, dass sie die gesamte Komponente in eine <T>-Komponente einschließt, falls sie nicht bereits umschlossen ist.

<div>Hello, world!</div> -> <T id="SOME_ID"><div>Hello, world!</div></T>

Siehe die Referenz für weitere Details darüber, wie die <T>-Komponente umschlossen wird.

`<GTProvider>`-Verhalten

Für den Next.js App Router wird der Setup-Befehl automatisch die <T>-Komponente in eine <GTProvider>-Komponente innerhalb der entsprechenden layout.jsx-Datei einschließen.

Zusätzlich wird es das withGTConfig Next.js Plugin in der next.config.js-Datei für Sie einrichten.

Auto-Formatierung

Der Setup-Befehl wird automatisch die Änderungen formatieren, die er an Ihrer Codebasis vornimmt, mit Prettier, Biome oder ESLint, abhängig von der Konfiguration Ihres Projekts.