이것은 모노 리포 입니다. 여기에는 최상위 packages.json 에서 제어되는 여러 패키지가 포함되어 있습니다.
각 프로젝트에는 자체 package.json 파일 패키지 별 구성이 포함되어 있지만 패키지 프로젝트에서 yarn install 실행하지 마십시오. 대신 최상위에서 실행하십시오.
패키지에서 yarn install 실행하면 다음과 같은 도움이되지 않는 오류가 발생할 수 있습니다.
Error: ENOENT: no such file or directory, symlink '…fozzie-componentspackages…' -> '…fozzie-componentsnode_modules@justeat…'
이 경우 모든 node_modules 폴더를 삭제 한 다음 Root 디렉토리에서 yarn install 다시 실행하십시오.
일부 드문 경우 구성 요소 자체 package.json 파일에 지정된 모듈은 때때로 올바르게 해결 / 설치하지 못할 수 있습니다. 예제 오류 : 다음 모듈을 찾을 수 없습니다. yarn add @moduleName 설치하려면 실행하십시오.
프로젝트의 루트에서 시도 할 수있는 두 가지 솔루션이 있습니다.
Turborepo는 JavaScript 및 TypeScript 코드베이스에 최적화 된 지능형 빌드 시스템입니다. 우리는 Turborepo를 사용하여 파이 monorepo 내의 모든 빌드 스크립트의 실행을 용이하게합니다.
로컬 개발 / CI 워크 플로를 속도를 높이기 위해 Turborepo의 원격 캐싱 기능을 사용하여 빌드 아티팩트를 AWS S3에 게시합니다. 이를 통해 수정 된 패키지 만 빌드 작업을 실행할 수 있습니다.
이 기능을 활용하려면 로컬 컴퓨터에서 TURBO_TOKEN 환경 변수를 설정해야합니다. 이 토큰의 가치에 대해서는 디자인 시스템 팀에 연락하십시오.
패키지 노드 작업을 실행할 때 활성화되면 '원격 캐싱 활성화'가 표시됩니다.
필요한 구성 요소에 대한 작업이 실행되도록 Monorepo의 루트에서 다음 작업을 실행하는 것이 좋습니다.
test lint build
다른 테스트 작업의 경우 여러 가지 방법으로 실행할 수 있습니다.
# 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에서 몇 가지 선택적인 Mixin Helpers를 만들었습니다. 사용 방법의 예는 다음과 같습니다.
참고 : 옵션 믹스 인을 가져 와서 common.scss 파일에서 @include 사용하면 SFC에 module 활성화 된 경우 작동하지 않습니다.
< style lang="scss" module>
@include pageBanner () ;
</ style > common.scss 파일에 재사용 가능한 스타일을 추가 할 수 있습니다. 이는 하위 구성 요소를 사용하고 믹스 인, 기능 및 변수를 공유하려는 구성 요소에 유용 할 수 있습니다.
모든 구성 요소는 vue.config.js 파일과 함께 제공되어 common.scss 파일을 common 스페이스에서 사용할 수 있습니다.
`@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 에서 열리는 Storybook을 시작하십시오.
또는 yarn build:changed 및 yarn storybook:serve-changed 을 실행할 수 있습니다.
개발 중에 스토리 북에서 단일 구성 요소를 보려면 IDE에서 구성 요소 *.stories.js 파일을 열고 Storybook - Run Currently Open Story File . (이것은 VS 코드에서만 작동합니다).
이것은 스토리 북이 다른 구성 요소 스타일 시트를 당기는 버그를 방지하기 때문에 특히 유용합니다 (여기 참조).
우리는 Husky를 사용하여 GIT 후크를 관리합니다.
커밋을 할 때 다음 스크립트는 사전 커밋 후크의 일부로 실행됩니다.
이 허스키 훅을 건너 뛰려면 커밋 할 때 --no-verify 인수를 추가하십시오.
예를 들면 : git commit -m "Refactor f-button" --no-verify .
이 repo에 기여하는 방법에 대한 자세한 내용은 스토리 북 문서 섹션에서 확인할 수 있습니다.
Fozzie 구성 요소는 원래 VUE 2에 저술되었습니다. VUE 3 응용 프로그램에서 작동하기 위해 COMPAT 모드에서 VUE 3을 실행하십시오.
