Ceci est un mono-repo . Il contient plusieurs packages, tous contrôlés à partir d'un packages.json de haut niveau.json.
Chaque projet a son propre fichier package.json contenant une configuration spécifique à un package, mais n'exécutez pas yarn install à partir d'un projet de package; Exécutez-le au lieu du plus haut niveau.
Si vous exécutez yarn install à partir d'un package, vous pouvez bien obtenir une erreur inutile comme ceci:
Error: ENOENT: no such file or directory, symlink '…fozzie-componentspackages…' -> '…fozzie-componentsnode_modules@justeat…'
Si cela se produit, supprimez tous les dossiers node_modules partout, puis exécutez à nouveau yarn install à partir du répertoire racine.
Dans certains cas rares cas, les modules spécifiés dans le fichier package.json des composants peuvent parfois ne pas résoudre / installer correctement. Cela peut entraîner des erreurs comme: Exemple d'erreur: Le module suivant n'a pas pu être trouvé, veuillez exécuter yarn add @moduleName pour l'installer.
Il y a deux solutions que vous pourriez essayer à partir de la racine du projet qui peuvent résoudre ce problème:
TurborePo est un système de construction intelligent optimisé pour les bases de code JavaScript et TypeScript. Nous utilisons TurborePo pour faciliter l'exécution de tous nos scripts de construction dans le tarte monorepo.
Afin d'accélérer les workflows de développement local / CI, nous utilisons les fonctionnalités de mise en cache à distance de TurborePo pour publier des artefacts de construction sur AWS S3. Cela garantit que seuls les packages modifiés ont leurs tâches de construction exécutées.
Afin de profiter de cette fonctionnalité, vous devez définir la variable d'environnement TURBO_TOKEN sur votre machine locale. Veuillez contacter l'équipe du système de conception pour la valeur de ce jeton.
Une fois activé, vous verrez la «mise en cache distante activée» lors de l'exécution d'une tâche de nœud de packages.
Il est recommandé d'exécuter les tâches suivantes à la racine du monorepo pour s'assurer que les tâches sont exécutées pour les composants requis:
build lint test
Pour d'autres tâches de test, vous pouvez exécuter de plusieurs façons:
# 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:chromeOU
# 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-messageNous avons créé plusieurs aides à mixin en option à Fozzie. Voici un exemple de la façon de l'utiliser:
Remarque: L'importation du mixin facultatif et l'utilisation @include dans le fichier common.scss de votre composant ne fonctionnent pas si vous avez module activé sur votre SFC.
< style lang="scss" module>
@include pageBanner () ;
</ style > Vous pouvez ajouter des styles réutilisables au fichier common.scss . Cela peut être utile pour les composants qui utilisent des sous-composants et peuvent souhaiter partager des mixins, des fonctions et des variables.
Chaque composant est livré avec un fichier vue.config.js qui rend le fichier common.scss disponible sous l'espace de noms common comme:
`@use "../assets/scss/common.scss";`
Pour accéder à n'importe quoi à partir du fichier commun, préfixez simplement la valeur comme tel:
// Fake values used for demonstration
.someClass {
color: common.$fontColor;
line-height: common.line-height();
@include common.truncate();
}
Vous pouvez supprimer le besoin d'un espacement de noms en utilisant quelque chose comme @use "../assets/scss/common.scss" as * cependant, l'utilisation de l'espace de noms facilite la compréhension d'où vient une valeur.
Pour exécuter d'abord le livre, vous devez exécuter ce qui suit au niveau supérieur
yarn build pour construire les packages requis pour que le livre de contes fonctionne.
Ensuite, exécutez yarn storybook:serve à démarrer StoryBook, qui s'ouvrira sur localhost:8080 .
Alternativement, vous pouvez exécuter yarn build:changed et yarn storybook:serve-changed pour afficher simplement le composant sur lequel vous travaillez, ainsi que n'importe laquelle de ses dépendances / personnes à charge.
Si vous souhaitez afficher un seul composant dans le livre de contes pendant le développement, vous pouvez le faire en ouvrant le fichier composants *.stories.js dans votre IDE et exécutant le Storybook - Run Currently Open Story File qui peut être trouvée dans l'onglet de débogage à gauche. (Cela ne fonctionne qu'avec le code vs).
Ceci est particulièrement utile car il empêche un bug où le livre de contes tire d'autres composants de styles (voir ici).
Nous utilisons Husky pour gérer nos crochets Git.
Lorsque vous vous engagez, les scripts suivants s'exécuteront dans le cadre de notre crochet pré-engagé.
Si vous souhaitez sauter ce crochet husky, ajoutez simplement l'argument --no-verify lorsque vous vous engagez.
Par exemple: git commit -m "Refactor f-button" --no-verify .
Plus d'informations sur la façon de contribuer à ce dépôt peuvent être trouvées dans notre section de documentation du livre de contes
Les composants de Fozzie ont été initialement rédigés dans Vue 2. Pour vous assurer qu'ils fonctionnent dans une application Vue 3, veuillez exécuter Vue 3 en mode compat.
