Ini adalah mono-repo . Ini berisi beberapa paket, semuanya dikendalikan dari packages.json tingkat atas.
Setiap proyek yarn install file package.json . Alih -alih jalankan dari level atas.
Jika Anda menjalankan yarn install dari paket maka Anda mungkin mendapatkan kesalahan yang tidak membantu seperti ini:
Error: ENOENT: no such file or directory, symlink '…fozzie-componentspackages…' -> '…fozzie-componentsnode_modules@justeat…'
Jika ini terjadi, hapus semua folder node_modules di seluruh dan kemudian jalankan yarn install dari direktori root lagi.
Dalam beberapa kasus yang jarang, modul yang ditentukan dalam file package.json komponen sendiri kadang -kadang dapat gagal untuk menyelesaikan / menginstal dengan benar. Ini dapat menyebabkan kesalahan seperti: contoh kesalahan: modul berikut tidak dapat ditemukan, silakan jalankan yarn add @moduleName untuk menginstalnya.
Ada dua solusi yang bisa Anda coba dari akar proyek yang dapat memperbaikinya:
Turborepo adalah sistem build cerdas yang dioptimalkan untuk javascript dan basis kode naskah. Kami menggunakan Turborepo untuk memfasilitasi pelaksanaan semua skrip build kami di dalam pie monorepo.
Untuk mempercepat pengembangan lokal / alur kerja CI, kami menggunakan fungsionalitas caching jarak jauh Turborepo untuk menerbitkan artefak build ke AWS S3. Ini memastikan bahwa hanya paket yang dimodifikasi yang menjalankan tugasnya.
Untuk memanfaatkan fungsi ini, Anda harus mengatur variabel lingkungan TURBO_TOKEN pada mesin lokal Anda. Harap hubungi tim Sistem Desain untuk nilai token ini.
Setelah diaktifkan, Anda akan melihat 'Caching jarak jauh diaktifkan' saat menjalankan tugas simpul paket.
Disarankan untuk menjalankan tugas -tugas berikut pada akar monorepo untuk memastikan tugas dieksekusi untuk komponen yang diperlukan:
build test lint
Untuk tugas tes lainnya, Anda dapat mengeksekusi dalam beberapa cara:
# 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:chromeATAU
# 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-messageKami telah membuat beberapa pembantu mixin opsional di Fozzie. Berikut adalah contoh cara menggunakannya:
Catatan: Mengimpor mixin opsional dan menggunakan @include di file common.scss dari komponen Anda tidak berfungsi jika Anda memiliki module yang diaktifkan di SFC Anda.
< style lang="scss" module>
@include pageBanner () ;
</ style > Anda dapat menambahkan gaya yang dapat digunakan kembali ke file common.scss . Ini dapat berguna untuk komponen yang menggunakan sub-komponen dan mungkin ingin berbagi mixin, fungsi, dan variabel.
Setiap komponen dilengkapi dengan file vue.config.js yang membuat file common.scss tersedia di bawah namespace common seperti itu:
`@use "../assets/scss/common.scss";`
Untuk mengakses apa pun dari file umum, cukup awalkan nilainya seperti:
// Fake values used for demonstration
.someClass {
color: common.$fontColor;
line-height: common.line-height();
@include common.truncate();
}
Anda dapat menghapus kebutuhan untuk nama dengan menggunakan sesuatu seperti @use "../assets/scss/common.scss" as * namun memanfaatkan namespace membuatnya lebih mudah untuk dipahami dari mana nilai berasal.
Untuk menjalankan buku cerita terlebih dahulu, Anda harus menjalankan yang berikut di level atas
yarn build Untuk Membangun Paket yang Membutuhkan untuk Buku Story untuk dijalankan.
Kemudian Jalankan yarn storybook:serve untuk memulai Storybook, yang akan dibuka di localhost:8080 .
Atau, Anda dapat menjalankan yarn build:changed yarn storybook:serve-changed untuk hanya melihat komponen yang sedang Anda kerjakan, serta semua dependensi / tanggungannya.
Jika Anda ingin melihat satu komponen dalam buku cerita selama pengembangan, Anda dapat melakukan ini dengan membuka file komponen *.stories.js di IDE Anda dan menjalankan Storybook - Run Currently Open Story File yang dapat ditemukan di tab debug di sebelah kiri. (Ini hanya berfungsi dengan VS Code).
Ini sangat berguna karena mencegah bug di mana buku cerita menarik stylesheet komponen lain (lihat di sini).
Kami menggunakan Husky untuk mengelola kait git kami.
Saat Anda membuat komit, skrip berikut akan berjalan sebagai bagian dari kait pra-komit kami.
Jika Anda ingin melewatkan kait serak ini, cukup tambahkan argumen --no-verify saat membuat komit Anda.
Misalnya: git commit -m "Refactor f-button" --no-verify .
Informasi lebih lanjut tentang cara berkontribusi pada repo ini dapat ditemukan di bagian dokumentasi buku cerita kami
Komponen fozzie awalnya ditulis di Vue 2. Untuk memastikan mereka bekerja di aplikasi Vue 3, silakan jalankan Vue 3 dalam mode Compat.
