NPM Publish - NPM'e kendi React kütüphanenizi ekleyin

NPM her yazılımcının, en çok da full stack yazılımcının sıkılıkla başvurduğu bir kaynak. Yeterince kullandığımız bu kaynağa artık ufak da olsa bir katkı yapmamızın zamanı geldi. "Neden" üzerinde değil de "Nasıl" üzerinde durmak istiyorum.

Öncelikle https://www.npmjs.com/ üzerinden bir kullanıcı yaratalım. Kullanıcı adımızı da aktifleştirdikten sonra:

npm adduser

komutu ile kullanıcı adı ve parolamızı sisteme tanıtalım. Daha sonra boş bir klasör yaratıp bu klasör içinden init komutunu çalıştıralım:

npm init

Bu komut, klasör içerisinde ilgili package.json dosyasını yaratacaktır. Aslında yalnızca "package.json" içeren bir klasör başlı başına bir NPM paketidir, ya da daha doğru bir ifade ile Node JS uygulamasıdır. Hemen şimdi:

npm publish

komutunu çalıştırarak boş bir NPM modülü yaratabilirsiniz. Tavsiyem bunu 0.0.1 versiyon adıyla yapmanızdır. Unutmayın ki bir kere eklediğiniz NPM paketini artık kaldıramazsınız. NPM 24 saat içinde eklenen paketleri silmeye izin veriyor ancak bu sürenin sonunda NPM'in isteği dışında kendi paketinizi dahi silemezsiniz. Ancak boş NPM modülü yaratıp modül adını rezerve etmek NPM'in şartlarına uymamaktadır. Kısa süre içinde kodunuzu göndermeniz gerekiyor. Ya da kodunuz bitene dek bekleyin eğer o süre içerisinde modül adı alınmış olursa başka bir ad seçebilirsiniz.

Herhangi bir NodeJS uygulamasını eklemek aslında oldukça kolay. Çünkü NPM'in açılımı da zaten Node Paket Yöneticisi. Her Node uygulaması aslında bir NPM paketidir. Ancak ben React kütüphanemi eklemek ve daha sonra başka bir React uygulamasından importkomutuyla kullanmak istiyorum. Üstelik ES5 değil ES6 kullanmak istiyorum. O halde Babel ve Webpack ayarları yapmam gerekiyor.

package.json dosyasının bulunduğu klasör üzerinde .babelrc dosyası yaratıp içeriğini aşağıdaki gibi oluşturalım:

Daha sonra webpack.config.js dosyasını ekleyelim:

Olabilecek en basit React bileşenini de src/index.js konumuna ekleyelim. Çünkü bir önceki webpack ayarında modülün başlangıç noktası olarak burayı seçmiştik.

İlk adımda yarattığımız package.json dosyası React ile kullanmak için yeterli bir dosya değil. Bu dosyanın içeriğini aşağıdaki şekilde değiştirelim:

DİKKAT Aşağıdaki dosya yalnızca örnek olması açısından konulmuştur. name, description, author, repository ve homepage gibi yerleri değiştirmeniz gerekecektir.

Şimdi paketimizi npm'e göndermeden önce derlememiz gerekiyor. Çünkü daha önceden de belirttiğim gibi React bileşeni bir Node paketi değil. Webpack'in bunu derlemesi gerekiyor.

npm run build

Bu komutu çalıştırdıktan sonra build klasörü ve bu klasörün içinde index.js dosyasının yaratıldığını göreceksiniz. Bunun ayarını webpack.config.js dosyasının 5. ve 6. satırlarında yapmıştık. Ayrıca öbür tarafta package.json dosyasının 5. satırında da bu dosyayı kullanacağımızı belirtmiştik. Dosya içerisine bakarsanız bunun Node paketlerine benzediğini (module.exports = .. şeklinde) göreceksiniz. Artık ilk npm modülümüzü yaratmaya hazırız.

npm publish

Bir kere publish ettikten sonra değişiklikler yapmak isterseniz, yeni bir versiyon yaratmanız gerekecektir. package.json dosyasının ilgili yerini güncellemeniz gerekiyor. Örneğin 0.0.2. Versiyon adı ve nasıl çoğaltılacağı sizin takdirinize kalmış.

Bu işleme yazılım dünyasında boilerplate deniyor. Bir uygulamayı çalıştırmak için yapmak gereken minimum ayar. Bu sebeple boilerplate'ler otomasyon için uygundur. Daha da ötesi otomasyon gereklidir. Ben bu boilerplate'i otomatik yapan başka bir npm paketi hazırladım. Yalnız, bu paketi global olarak kullanıyorum (create-react-app gibi).

https://www.npmjs.com/package/create-npm-module

create-npm-module olarak eklediğim bu modülü aşağıdaki gibi kullanabilirsiniz:

1. npm install -g create-npm-module
2. create-npm-module my-awesome-module
3. cd my-awesome-module
4. npm install
5. npm run build
6. npm publish

Ancak genel olarak tavsiyem bütün boilerplate'leri öncelikle kendiniz elle yapın daha sonra otomasyon kullanın.

Not: Unutmayın. Eğer publish etmeden önce modülünüzü test etmek isterseniz bir React uygulamasına

npm install --save C:\benim-npm-modülüm

şeklinde ekleyip sonuçlarını görebilirsiniz.