Dies ist ein Mono-Repo . Es enthält mehrere Pakete, die alle von packages.json der obersten Ebene kontrolliert werden.json.
Jedes Projekt verfügt über eine eigene package.json -Datei mit paketspezifischer Konfiguration. Führen Sie jedoch keine yarn install von einem Paketprojekt aus. Führen Sie es stattdessen von der obersten Ebene aus.
Wenn Sie yarn install aus einem Paket ausführen, erhalten Sie möglicherweise einen nicht hilfreichen Fehler wie folgt:
Error: ENOENT: no such file or directory, symlink '…fozzie-componentspackages…' -> '…fozzie-componentsnode_modules@justeat…'
In diesem Fall löschen Sie alle Ordner node_modules überall und führen Sie dann erneut yarn install aus dem Stammverzeichnis aus.
In einigen seltenen Fällen kann die in der Komponenten angegebene package.json -Datei manchmal nicht korrekt behoben / installiert werden. Dies kann zu Fehlern wie folgt führen: Beispielfehler: Das folgende Modul konnte nicht gefunden werden. Führen Sie bitte yarn add @moduleName um es zu installieren.
Es gibt zwei Lösungen, die Sie aus der Wurzel des Projekts ausprobieren können, die dies möglicherweise beheben:
Turborepo ist ein intelligentes Build -System, das für JavaScript- und Typscript -Codebasen optimiert ist. Wir verwenden Turborepo, um die Ausführung aller unserer Build -Skripte im Pie Monorepo zu erleichtern.
Um die lokale Entwicklung / CI -Workflows zu beschleunigen, verwenden wir die Remote -Caching -Funktionalität von Turborepo, um Build -Artefakte für AWS S3 zu veröffentlichen. Dies stellt sicher, dass nur geänderte Pakete ihre Build -Aufgaben ausgeführt haben.
Um diese Funktionalität zu nutzen, müssen Sie die Umgebungsvariable TURBO_TOKEN auf Ihrer lokalen Maschine festlegen. Bitte wenden Sie sich an das Designsystemteam, um den Wert dieses Tokens zu erhalten.
Sobald Sie aktiviert sind, werden Sie bei der Ausführung einer Paket -Knoten -Aufgabe "Remote Caching aktiviert" angezeigt.
Es wird empfohlen, die folgenden Aufgaben am Wurzel des Monorepo auszuführen, um sicherzustellen, dass die erforderlichen Komponenten Aufgaben ausgeführt werden:
build test lint
Für andere Testaufgaben können Sie auf verschiedene Arten ausführen:
# Run Component tests for all components
# Note: Ensure Storybook is not running when running the following commands
cd ./fozzie-components
yarn storybook:build
yarn storybook:serve-static
yarn test-component:chromeODER
# Run Component tests for individual f-* package
# Note: Ensure Storybook is not running when running the following commands
cd ./fozzie-components
yarn storybook:build
yarn storybook:serve-static
# And in another window
yarn test-component:chrome --filter=@justeat/f-user-messageWir haben mehrere optionale Mixin -Helper in Fozzie erstellt. Hier ist ein Beispiel dafür, wie man es benutzt:
HINWEIS: Importieren des optionalen Mixins und mit @include in der common.scss -Datei Ihrer Komponente funktioniert nicht, wenn module auf Ihrem SFC aktiviert ist.
< style lang="scss" module>
@include pageBanner () ;
</ style > Sie können der common.scss -Datei wiederverwendbare Stile hinzufügen. Dies kann für Komponenten nützlich sein, die Unterkomponenten verwenden und möglicherweise Mixins, Funktionen und Variablen teilen möchten.
Jede Komponente wird mit einer Datei vue.config.js ausgestattet, mit der die common.scss -Datei unter dem common verfügbar ist.
`@use "../assets/scss/common.scss";`
Um aus der gemeinsamen Datei auf irgendetwas zugreifen zu können, präfixen Sie einfach den Wert wie SO:
// Fake values used for demonstration
.someClass {
color: common.$fontColor;
line-height: common.line-height();
@include common.truncate();
}
Sie können den Bedarf an Namespagieren entfernen, indem Sie so etwas wie @use "../assets/scss/common.scss" as * die Verwendung des Namespace erleichtert es viel einfacher zu verstehen, woher ein Wert kommt.
Um das Storybook zuerst auszuführen, müssen Sie Folgendes auf der obersten Ebene ausführen
yarn build , um die Forderungspakete für das Storybook zu erstellen.
Dann führen Sie yarn storybook:serve to Start Storybook, das auf localhost:8080 geöffnet wird.
Alternativ können Sie yarn build:changed und yarn storybook:serve-changed um einfach die Komponente zu sehen, an der Sie arbeiten, sowie alle Abhängigkeiten / Angehörigen.
Wenn Sie während der Entwicklung eine einzige Komponente in Storybook anzeigen möchten, können Sie dies tun, indem Sie die Komponenten *.stories.js -Datei in Ihrer IDE öffnen und das Storybook - Run Currently Open Story File (Dies funktioniert nur mit VS -Code).
Dies ist besonders nützlich, da es einen Fehler verhindert, in dem das Storybook andere Komponenten -Stylesheets einzieht (siehe hier).
Wir verwenden Husky, um unsere Git -Hooks zu verwalten.
Wenn Sie ein Commit einnehmen, werden die folgenden Skripte als Teil unseres Vor-Commit-Hakens ausgeführt.
Wenn Sie diesen Husky-Haken überspringen möchten, fügen Sie einfach das Argument --no-verify hinzu, wenn Sie Ihr Commit machen.
Zum Beispiel: git commit -m "Refactor f-button" --no-verify .
Weitere Informationen zum Beitrag zu diesem Repo finden Sie in unserem Abschnitt "Storybook Dokumentation"
FOZZIE -Komponenten wurden ursprünglich in Vue 2 verfasst. Um sicherzustellen, dass sie in einer Vue 3 -Anwendung arbeiten, führen Sie Vue 3 im Kompatmodus aus.
