typescript - Sveltekit projeleri arasında kodu nasıl paylaşabilirim

Dört paketten oluşan bir SvelteKit ve TypeScript projesi için bir monorepo kurmaya çalışıyorum:

.
├── frontend // sveltekit project
├── backend // typescript proeject
├── app // sveltekit project
└── shared // where I'll store my common svelte and typescript files

Ön uç, arka uç ve uygulama projeleri ile paylaşılan paketteki kodu yeniden kullanmak istiyorum. Sadece bazı TypeScript arayüzlerini ve Svelte bileşenlerini projelerim arasında paylaşmak istiyorum, ama bunu yapmanın en iyi yolu hakkında hiçbir fikrim yok.

Her şeyden önce, her projeye import edebileceğim bir paket oluşturmak için svelte-kit package komutuyla paylaşılan paketi oluşturmaya çalıştım, ama bu yarn workspaces ile tamamen bozuluyor.

Projelerim arasında TypeScript dosyalarını ve Svelte bileşenlerini paylaşmak için hangi adımları atabilirim?

Cevap #1

Bunu yapmanın bir yolu turborepo kullanmaktır.

Takip edilecek basit kural:

Uygulamalar ve siteler uygulamalar klasörüne gider, kütüphaneler ve yapılandırmalar paketler klasörüne gider.

npx create-turbo@latest

Paket eklerken, npm paket yönergelerine uyduğundan ve uygulamalarda içe aktarılabilmesi için package.json dosyasına sahip olduğundan emin olun. İşte benim stub svelte kütüphanem uikit için package.json örneği:

{
  “name”: “uikit”,
  “version”: “0.0.0",
  “main”: “./index.svelte”,
  “types”: “./index.svelte”,
  “devDependencies”: {
    “svelte”: “^3.44.0”
  }
}

Uygulamaları ve paketleri ekledikten sonra turbo.json içinde bulunan turbo yapılandırmasını yapılandırmamız gerekiyor. Yalnızca build için çıktılara svelte-kit komutunu eklemem gerekti:

{
  “pipeline”: {
    “build”: {
      “dependsOn”: [“^build”],
      “outputs”: [“dist/**“, “.next/**“, “svelte-kit/**“]
    },
    “lint”: {
      “outputs”: []
    },
    “dev”: {
      “cache”: false
    }
  }
}

Daha sonra sveltekit uygulamanızda svelte bileşenlerini şu şekilde içe aktarabilirsiniz:

<script>
  import Button from “uikit”
</script>
<Button> Test Button </Button>

Sonraki adım olarak, tüm siteleri aynı anda çalıştırabilmemiz için “apps” klasöründeki her depo için farklı portlar ayarlamanız gerekiyor. Bu bazı kullanım durumları için oldukça kullanışlı olabilir. İlgili package.json dosyalarında, sitenin kökünde bulunan dev komut betiğini güncelleyin:

  “scripts”: {
     “dev”: “svelte-kit dev --port 3003”,
     ...

Bu kadar olmalı; geliştirmeye başla!

npm run dev

Bu, projedeki tüm uygulamaları belirlenmiş portlarında başlatacaktır.

npm run build

Her kütüphane veya uygulamanın kendi package.json dosyası olacağına göre bu komutları nerede çalıştırdığını merak ediyor olmalısın?

Monoreponun kök dizinindeki tüm komutları çalıştırın. Turborepo bununla ilgileniyor.

Bunun hakkında daha fazla bilgiyi burada okuyabilirsiniz https://turborepo.org/

Ayrıca işte hem svelte hem de react kütüphanelerinin/uygulamalarının aynı monorepo içinde olduğu repo örneği burada https://nenadkostic.com/blog/turborepo-sveltekit/

İlgili makaleler