VO.
← Bloga dön

Bir Vue bileşen kitini npm'e yayınlamak

@vezironi/veyra-ui: kapsamlı isim, eş bağımlılık olarak Vue, temalar ve lisans.

1 dk okuma#vue#npm#open-source

Veyra UI'ı yalnızca bir demo sitesi olarak bırakmak istemedim; başka projelerde de kullanabilmek için npm'e paket olarak yayınladım: @vezironi/veyra-ui. Bu yazıda bir Vue bileşen kitini paketlerken dikkat ettiğim noktaları topluyorum.

Kapsamlı (scoped) bir isim

Paketi kendi kullanıcı adımın altında, @vezironi/ kapsamıyla yayınladım. Böylece isim çakışması derdi olmuyor ve hangi paketlerin bana ait olduğu tek bakışta anlaşılıyor. Kapsamlı paketler varsayılan olarak gizli sayıldığı için ilk yayında herkese açık olduğunu belirtmek gerekiyor:

npm publish --access public

Vue'yu pakete gömmemek

Vue, paketin bağımlılığı değil, eş bağımlılığı (peer dependency). Böylece paketi kuran proje kendi Vue sürümünü kullanıyor ve sayfada iki ayrı Vue kopyası oluşmuyor:

{
  "peerDependencies": {
    "vue": "^3.5.0"
  }
}

Temalar

Kit Tailwind CSS v4 ile yazıldı ve hem koyu hem açık tema içeriyor. Renkleri sabit değerler yerine CSS değişkenleri üzerinden vermek, kullananın kendi temasını birkaç satırla uygulayabilmesini sağlıyor.

Lisans

Paketi MIT lisansıyla yayınladım: herkes kullanabilir, değiştirebilir ve kendi projesine ekleyebilir.

Kurulum

npm i @vezironi/veyra-ui

Bileşenlerin canlı örneklerine ve belgelere veyra.vezironi.com adresinden, kaynak koduna GitHub üzerinden ulaşabilirsin.