React, TypeScript ve CSS Modülleriyle Verimli npm Paketleri Oluşturma: Kapsamlı Bir Kılavuz

Yeniden kullanılabilir npm paketleri oluşturmak, geliştirme sürecinizi daha verimli ve keyifli hale getirebilir. Bu makalede React, TypeScript, CSS Modülleri ve diğer araçları kullanarak modern ve sağlam bir proje kurulumu oluşturma konusunda size rehberlik edeceğiz.

Başlamadan önce kaynak kodunu burada bulabilirsiniz: https://github.com/helgastogova/npm-react-typescript-template . Bu depo, React ve TypeScript kullanarak npm paketleri oluşturmak için bir temel görevi görür. Modern bir geliştirme iş akışı için bir oluşturma süreci ve bir dizi önerilen paketle önceden yapılandırılmıştır.

Temel özellikler şunları içerir:

1. React ve TypeScript : Güçlü tür güvenliği ve üstün geliştirici deneyimi ile modern kullanıcı arayüzü geliştirme.
2. CSS Modülleri : Bileşenleri ayrı ayrı şekillendirmek, CSS çakışmalarını önlemek ve modüler tasarımı mümkün kılmak.
3. ESLint : JavaScript'e ve React'ın en iyi uygulamalarına bağlı kalarak kod kalitesinin sağlanması.
4. Toplama : React ve TypeScript kodunu dağıtım için tek bir dosyada verimli bir şekilde bir araya getirir.
5. PostCSS : Yeni nesil CSS özelliklerini kullanma ve tarayıcı uyumluluğunu yönetme.
6. Boyut Sınırı : Kitaplığınızın boyutunun izlenmesi ve yanlışlıkla boyut şişmesinin önlenmesi.

Her araca daha kapsamlı bir şekilde bakalım.

CSS Modülleri

CSS modülleri, stil kaosu alanında bir güvenlik işareti görevi görür. Stilleriniz için yerel kapsam uygularlar, çatışmaları ve çakışma sorunlarını önlerler. Her CSS modülü, bileşenin içine "kapsüllenecek" ve tanımladığınız stillerin dışarı sızmaması ve diğer öğeleri istemeden etkilememesi sağlanacaktır.

CSS Modülünü kullandığımız bu basit bileşeni düşünün:

 // TestComponent.tsx import React from 'react'; import s from './TestComponent.module.css'; type TestComponentProps = { text?: string; }; export const TestComponent: React.FC<TestComponentProps> = ({ text }) => { return <div className={s.root}>{text ?? 'Hello!'}</div>; };

Ve ilgili CSS Modülü:

 /* TestComponent.module.css */ .root { background-color: pink; padding: 20px; border-radius: 8px; }

Bu durumda, TestComponent.module.css dosyasındaki .root sınıfı, farklı bir modüldeki diğer .root sınıflarını etkilemeyecektir.

ESLint

ESLint, çalkantılı bir kod denizinde size rehberlik eden bir deniz feneri gibidir. Kod kalitesinin korunmasına, hataların yakalanmasına ve sorun haline gelmeden en iyi kodlama uygulamalarının uygulanmasına yardımcı olur.

package.json dosyasında şunlara sahipsiniz:

 "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" }

Linter'ı npm run lint ile çalıştırın. ESLint, TypeScript dosyalarınızı tarayacak ve olası sorunlar hakkında sizi uyaracaktır. Bu, özellikle küçük hataların veya tutarsızlıkların kolayca ortaya çıkabileceği büyük kod tabanları için kullanışlıdır.

Toplama

Rollup , kodunuzun kişisel fitness antrenörüdür. JavaScript'inizi, TypeScript'inizi ve CSS'nizi alır ve bunları dağıtıma hazır tek bir yalın, verimli pakette birleştirir.

Hafif ve hızlıdır ancak asıl faydası "ağaçları sarsma" yeteneğinden gelir. Toplama, kullanılmayan kodu son paketten çıkararak paketinizi mümkün olduğunca yalın hale getirebilir. Toplama yapılandırmanızın nasıl görünebileceğine dair bir örnek:

 // rollup.config.js const postcss = require('rollup-plugin-postcss'); const typescript = require('@rollup/plugin-typescript'); const peerDepsExternal = require('rollup-plugin-peer-deps-external'); const resolve = require('@rollup/plugin-node-resolve').default; const commonjs = require('@rollup/plugin-commonjs'); module.exports = { input: 'src/index.tsx', output: { dir: 'dist', format: 'cjs', sourcemap: true, }, plugins: [ peerDepsExternal(), resolve(), typescript(), commonjs(), postcss({ modules: true, }), ], };

CSS sonrası

PostCSS bir zaman yolcusu gibidir ve gelecekteki sözdizimi ve özellikleri kullanarak CSS yazmanıza olanak tanır. Daha sonra zamanda geriye giderek (deyim yerindeyse) bu modern stilleri eski tarayıcıların bile anlayabileceği kodlara dönüştürür.

PostCSS'yi yukarıdaki Toplama yapılandırmasında çalışırken görebilirsiniz. rollup-plugin-postcss kullanılarak modern CSS'niz dönüştürülür ve son paketinize dahil edilir. Bunun güzelliği, tarayıcı uyumluluğu konusunda endişelenmeden en son özellikleri kullanarak CSS yazabilmenizdir.

Boyut Sınırı

Size Limit, kitaplığınızın çok fazla şişmemesini sağlayan, her zaman tetikte olan bir bekçidir. Kullanıcıların indireceği hem JavaScript hem de CSS'yi ekleyerek kitaplığınızın gerçek maliyetini hesaplar. Paket boyutunuzu kontrol altında tutmanıza yardımcı olacak değerli bir araçtır.

package.json dosyanızda:

 "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ]

Daha sonra paketinizin boyutunu kontrol etmek için npm run size çalıştırabilirsiniz. Belirlediğiniz sınırı aşarsa (bu durumda 10 KB), komut dosyası bir hata verecektir. Bu, bilmeden kullanıcılarınızın indirme sürelerini artırmadığınızdan emin olmanın harika bir yoludur.

Kurmak

Bu şablonu kullanmaya başlamak için depoyu klonlayın:

 git clone https://github.com/helgastogova/npm-react-typescript-template.git

Dizine gidin:

 cd npm-react-typescript-template

Bağımlılıkları yükleyin:

 npm install

Paketinizi geliştirmeye başlamaya hazırsınız! Giriş noktası src/index.tsx

Paketi Oluşturmak

Kendi bileşeninizi oluşturduktan sonra ve dağıtım için paketinizi oluşturmaya hazır olduğunuzda şunu çalıştırın:

 npm run build

Oluşturduğunuz paketiniz dist dizininde npm'de yayınlanmaya hazır olacaktır.

Npm'de yayınlanıyor

package.json dosyanızdaki name alanını istediğiniz paket adına ayarladığınızdan emin olun. Ayrıca her yeni yayınlamadan önce sürüm numarasını güncellemeyi unutmayın. Bu tamamlandıktan sonra aşağıdakileri kullanarak npm'de oturum açın:

 npm login

Kullanıcı adınızı, şifrenizi ve e-posta adresinizi girin. Giriş yaptıktan sonra paketinizi aşağıdakilerle yayınlayabilirsiniz:

 npm publish

Artık bileşeninizi npmjs kütüphanesinde yayınladınız ve insanlar onu kullanmaya başlayabilir. Harikasın!

Mutlu kodlama!