นี่คือ โมโนรีเป้ มันมีหลายแพ็คเกจทั้งหมดควบคุมจาก 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 CodeBases เราใช้ turborepo เพื่ออำนวยความสะดวกในการดำเนินการของสคริปต์การสร้างทั้งหมดของเราภายในพายโมเทอโป
เพื่อเพิ่มความเร็วในการพัฒนาในท้องถิ่น / เวิร์กโฟลว์ CI เราใช้ฟังก์ชั่นการแคชระยะไกลของ Turborepo เพื่อเผยแพร่สิ่งประดิษฐ์สร้างให้กับ AWS S3 สิ่งนี้ทำให้มั่นใจได้ว่าแพ็คเกจที่ได้รับการแก้ไขเท่านั้นที่มีงานสร้างของพวกเขาดำเนินการ
ในการใช้ประโยชน์จากฟังก์ชั่นนี้คุณต้องตั้งค่าตัวแปรสภาพแวดล้อม TURBO_TOKEN บนเครื่องในเครื่องของคุณ โปรดติดต่อทีมระบบการออกแบบเพื่อหาคุณค่าของโทเค็นนี้
เมื่อเปิดใช้งานแล้วคุณจะเห็น 'เปิดใช้งานการแคชระยะไกล' เมื่อดำเนินการงานโหนดแพ็คเกจ
ขอแนะนำให้เรียกใช้งานต่อไปนี้ที่รากของ monorepo เพื่อให้แน่ใจว่างานจะถูกดำเนินการสำหรับส่วนประกอบที่ต้องการ:
build lint test
สำหรับงานทดสอบอื่น ๆ คุณสามารถดำเนินการได้หลายวิธี:
# 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เราได้สร้างผู้ช่วย MixIn เสริมหลายตัวใน Fozzie นี่คือตัวอย่างของวิธีการใช้:
หมายเหตุ: การนำเข้า mixin เสริมและการใช้ @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();
}
คุณสามารถลบความจำเป็นในการ namespacing โดยใช้บางอย่างเช่น @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 เพื่อจัดการตะขอ Git ของเรา
เมื่อคุณทำข้อตกลงสคริปต์ต่อไปนี้จะทำงานเป็นส่วนหนึ่งของเบ็ดล่วงหน้าของเรา
หากคุณต้องการข้าม Husky Hook นี้เพียงเพิ่มอาร์กิวเมนต์ --no-verify เมื่อทำการกระทำของคุณ
ตัวอย่างเช่น: git commit -m "Refactor f-button" --no-verify
ข้อมูลเพิ่มเติมเกี่ยวกับวิธีการมีส่วนร่วมใน repo นี้สามารถพบได้ในส่วนเอกสารนิทานของเรา
ส่วนประกอบของ Fozzie ถูกเขียนขึ้นใน Vue 2 เพื่อให้แน่ใจว่าพวกเขาทำงานในแอปพลิเคชัน Vue 3 โปรดเรียกใช้ Vue 3 ในโหมด COMPAT
