Vue.js’de Oluşturulan Components(bileşenler) NPM’de Nasıl Yayınlanır?

Burada sıfırdan Vue.js projesi oluşturmaktansa daha önceden anlatmış olduğum Vue.js + Jest projesi üzerinden devam edeceğim. Önceden oluşturduğum projede hali hazırda bir button component’i hazırdı şimdi bunu NPM’de bunu yayınlamak kaldı.

Vue.js Bileşenlerini(Components) Jest ile Birim(Unit) Testinin Yapılması

Adım 1 — Kütüphane Derlemesini Ayarlama

Bileşenlerinizi bir kütüphane olarak oluşturmak için vue-cli’dan yararlanmanız gerekir. vue-cli-service build — target lib — name myLib [entry] öğesini package.json komut dosyalarınıza ekleyin. [entry] varsayılan olarak App.vue’unuzdur, ancak bu bileşenleri içe aktardığınız herhangi bir dosyanın göreli yoluna değiştirebilirsiniz.

Komut dosyalarıma build-bundle ekledim, böylece kütüphane paketimi oluşturmak için npm run build-bundle komutunu çalıştırabilirim.

Derleme komutunuzu komut dosyalarına ekleyin — package.json

npm run build ve npm run build-bundle komut satırına yazdıktan sonra bu şuna benzer bir çıktı üretir:

Kütüphanenizi oluşturma

Vue.js + Jest örneği için, giriş dosyası aşağıdaki gibi görünmelidir:

src/components/index.js

Adım 2 — Package.json dosyasındaki çıktı dosyanıza işaret etme

Package.json içindeki main özniteliğinizin çıktı dosyanıza işaret ettiğinden emin olun. Ben commonjs paketini kullanmayı tercih ederim.

package.json içindeki ana özellik çıktı dosyanıza işaret eder

Adim 3 — Package.json dosyasına files özniteliği ekleme

Bu önemli bir adım. Paketimizi her yayınladığımızda hangi dosyaların npm’ye yüklenmesi gerektiğini belirtmemiz gerekiyor.
Birisinin src klasöründen SFC’yi (Single File Component) kullanmak istemesi durumunda, belirlediğimiz tüm dosyaları dışarı çıkarırız.

"files": [  "dist/*",  "src/*",  "public/*",  "*.json",  "*.js"]

Adım 4 — NPM’de kullanıcı olarak ekleme / oturum açma

Npm’de kayıtlı olduğunuzdan emin olun. Yeni bir kullanıcı kaydetmek için npm adduser veya mevcut bir kullanıcı olarak oturum açmak için npm login komutlarını kullanın.

Adım 5 — NPM kullanıcı kimlik bilgilerini doğrulama

Kullanıcı adınızı doğrulamak için npm whoami yazın.

Adım 6 — Bileşen kitaplığınızı adlandırma

Paketiniz için bir ad seçin, daha önce alınmadığından emin olmalısınız. package.json’unuza koyduğunuzdan emin olun.

Benzersiz bir ad seçin ve package.json’unuzda değiştirin.

Adım 7 — Oluşturma(Build)

1. adımda eklediğiniz paket komut dosyasını çalıştırarak paketinizi oluşturun.

npm run build-bundle

Adım 8 — Bileşen kitaplığınızı NPM’de yayınlama

Kütüphaneye genel erişim için yayınlamak üzere;
npm publish --access public komutunu çalıştırın.

Burada dikkat etmeniz gereken package.json dosyanızın içinde yer alan "private": false olması gerekmektedir.
Ve bu kadar. Vue component kitaplığınızı npm’de yayınlamayı bitirdiniz!

NPM profilinizde görülen paket

NPM profilinizde görülen paket detayı

Adım 9 — Yeni yayınlanan kitaplığınızı kullanma

Geriye kalan tek şey NPM’den bileşen kitaplığınızı kurmak ve bileşenleri kodunuza aktarmaktır. Projeye dahil etmek için şu şekilde indirmeniz gerekiyor:

npm install --save [myLibName]

myLibName 6. Adımda verdiğiniz kitaplığınızın adıdır.

Main.js dosyasında veya benzer bir giriş noktasında aşağıdakileri kullanarak kitaplığınızı içe aktarmanız yeterlidir:

import _name from 'myLibName';
Vue.use(_name);

Şimdi, bileşenlerinizi kutudan çıkarmaya başlayabilirsiniz, çünkü bu bileşenleri küresel olarak 1. Adım’a kaydediyoruz.

Tüm bileşenlerimizi küresel olarak kaydettik

Örnek bileşen Button’umuzda, bileşen adını kaydettirdiğimizde MdButton olur. Böylece, doğrudan şablonunuzda şu şekilde kullanabilirsiniz:

<md-button customClass='primary' size='medium'>Mert</md-button>

Yukarıda belirtilen bileşen kütüphanesinin kodunu GitHub hesabımda bulabilirsiniz.

GitHub: https://github.com/mrtdmrmrt/Medium-VueJs-Jest-Testing