Это моно-репо . Он содержит несколько пакетов, все контролируемые из packages.json верхнего уровня.json.
Каждый проект имеет свой собственный файл package.json , содержащий специфическую конфигурацию пакета, однако не запускайте yarn install из проекта пакета; Вместо этого запустите его с верхнего уровня.
Если вы запустите yarn install из пакета, то вполне можете получить бесполезную ошибку, как это:
Error: ENOENT: no such file or directory, symlink '…fozzie-componentspackages…' -> '…fozzie-componentsnode_modules@justeat…'
Если это произойдет, удалите все папки node_modules повсюду, а затем снова запустите yarn install из корневого каталога.
В некоторых редких случаях модули, указанные в собственном компонентах, package.json . Это может привести к ошибкам, таким как: Пример Ошибка: Следующий модуль не может быть найдено, пожалуйста, запустите yarn add @moduleName для его установки.
Есть два решения, которые вы можете попробовать из корня проекта, которые могут исправить это:
Turborepo - это интеллектуальная система сборки, оптимизированная для кодовых баз JavaScript и TypeScript. Мы используем Turborepo, чтобы облегчить выполнение всех наших сценариев сборки в пироге Monorepo.
Чтобы ускорить локальные рабочие процессы разработки / CI, мы используем функцию удаленного кэширования Turborepo для публикации артефактов сборки AWS S3. Это гарантирует, что только модифицированные пакеты выполнены задачи по сборке.
Чтобы воспользоваться этой функциональностью, вы должны установить переменную среды TURBO_TOKEN на локальной машине. Пожалуйста, обратитесь к команде системы проектирования за ценность этого токена.
После включения вы увидите «удаленное кэширование» при выполнении задачи узла пакетов.
Рекомендуется выполнить следующие задачи в корне монорепо, чтобы обеспечить выполнение задач для необходимых компонентов:
build test lint
Для других тестовых задач вы можете выполнить несколькими способами:
# 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:chromeИЛИ
# 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-messageМы создали несколько дополнительных помощников микшина в Fozzie. Вот пример того, как его использовать:
ПРИМЕЧАНИЕ. Импорт дополнительного микшина и использование @include в файле common.scss вашего компонента не работает, если у вас включен module на вашем SFC.
< style lang="scss" module>
@include pageBanner () ;
</ style > Вы можете добавить повторно используемые стили в файл common.scss . Это может быть полезно для компонентов, которые используют подкомпоненты и могут пожелать поделиться микшинами, функциями и переменными.
Каждый компонент поставляется с файлом vue.config.js , который делает файл common.scss доступным в пространстве имен common как SO:
`@use "../assets/scss/common.scss";`
Чтобы получить доступ к чему -либо из общего файла, просто префикс значения так:
// Fake values used for demonstration
.someClass {
color: common.$fontColor;
line-height: common.line-height();
@include common.truncate();
}
Вы можете удалить потребность в пространстве имен, используя что -то вроде @use "../assets/scss/common.scss" as * однако, используя пространство имен, значительно облегчает понимание того, откуда поступает значение.
Чтобы запустить сборник рассказов, сначала вы должны запустить следующее на верхнем уровне
yarn build , чтобы построить пакеты «Требование» для запуска рассказов.
Затем запустите yarn storybook:serve для начала сборника рассказов, который откроется на localhost:8080 .
В качестве альтернативы, вы можете запустить yarn build:changed и yarn storybook:serve-changed чтобы просто просмотреть компонент, над которым вы работаете, а также любую его зависимости / иждивенцы.
Если вы хотите просмотреть один компонент в сборнике рассказов во время разработки, вы можете сделать это, открыв файл компонентов *.stories.js в вашем IDE и запустив сборник Storybook - Run Currently Open Story File , который можно найти на вкладке отладки слева. (Это работает только с кодом VS).
Это особенно полезно, поскольку предотвращает ошибку, в которой сборник рассказов тянет в других таблицах стилей компонентов (см. Здесь).
Мы используем Husky, чтобы управлять нашими крючками.
Когда вы совершаете коммит, следующие сценарии будут работать как часть нашего подключения.
Если вы хотите пропустить этот хриплый крючок, просто добавьте аргумент --no-verify при выполнении своего коммита.
Например: git commit -m "Refactor f-button" --no-verify .
Более подробную информацию о том, как внести свой вклад в этот репо, можно найти в нашем разделе документации по сборнику рассказов
Компоненты Fozzie изначально были написаны в Vue 2. Чтобы убедиться, что они работают в приложении Vue 3, пожалуйста, запустите Vue 3 в режиме COMPAT.
