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: . 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. https://github.com/helgastogova/npm-react-typescript-template Temel özellikler şunları içerir: : Güçlü tür güvenliği ve üstün geliştirici deneyimi ile modern kullanıcı arayüzü geliştirme. React ve TypeScript : Bileşenleri ayrı ayrı şekillendirmek, CSS çakışmalarını önlemek ve modüler tasarımı mümkün kılmak. CSS Modülleri : JavaScript'e ve React'ın en iyi uygulamalarına bağlı kalarak kod kalitesinin sağlanması. ESLint : React ve TypeScript kodunu dağıtım için tek bir dosyada verimli bir şekilde bir araya getirir. Toplama : Yeni nesil CSS özelliklerini kullanma ve tarayıcı uyumluluğunu yönetme. PostCSS : Kitaplığınızın boyutunun izlenmesi ve yanlışlıkla boyut şişmesinin önlenmesi. Boyut Sınırı 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, dosyasındaki sınıfı, farklı bir modüldeki diğer sınıflarını etkilemeyecektir. TestComponent.module.css .root .root 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. ESLint, dosyasında şunlara sahipsiniz: package.json "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" } Linter'ı 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. npm run lint Toplama , 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. Rollup 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ı 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 PostCSS'yi yukarıdaki Toplama yapılandırmasında çalışırken görebilirsiniz. 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. rollup-plugin-postcss Boyut Sınırı 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. Size Limit, dosyanızda: package.json "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ] Daha sonra paketinizin boyutunu kontrol etmek için ç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. npm run size 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 dizininde npm'de yayınlanmaya hazır olacaktır. dist Npm'de yayınlanıyor dosyanızdaki 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: package.json name 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 yayınladınız ve insanlar onu kullanmaya başlayabilir. Harikasın! npmjs kütüphanesinde Mutlu kodlama!
