Bu kılavuz, bir kullanarak NPM paketinizi baştan sona oluşturmanın ve yayınlamanın en kolay süreci boyunca size yol gösterecektir. mikro paket Biraz da hakkında konuşalım. Bunu özellikle basit kitaplıklar için etkili buluyorum çünkü yapılandırma konusunda endişelenmenize gerek yok, bu da paketinizi geliştirmeye odaklanmanıza olanak tanıyor. microbundle İşte özelliklerinin kısa bir listesi: Yerleşik yapılandırmalar; tek yapmanız gereken bir "dışa aktarma" alanı eklemek package.json olmadan kullanıma hazır TypeScript desteği tsconfig.json Çoklu çıktı formatları (CJS, UMD ve ESM) Yerleşik Terser sıkıştırması Temel olarak , üzerine inşa edilmiştir. Bu makalede bahsedeceğimden daha karmaşık kitaplıklarınız varsa, saf yapılandırmasını kullanmayı düşünebilirsiniz. microbundle rollup.js'nin rollup.js Paketinizi Başlatma Örnek olarak, iki sayıyı toplamak için yalnızca bir fonksiyonunu dışa aktaracak basit bir kitaplık oluşturalım. sum Proje için bir klasör oluşturun ve oluşturmak için varsayılan değerlerle çalıştırın. package.json npm init klasöründe oluşturun src index.ts // src/index.ts export function sum(a: number, b: number) { return a + b; } yükle microbundle npm i -D microbundle aşağıdaki değerlerle güncelleyin: package.json // package.json ... "type": "module", "source": "src/index.ts", // your source code "exports": { "types": "./dist/index.d.ts", // TypeScript declaration file "require": "./dist/index.cjs", // CommonJS entry point "default": "./dist/index.esm.js" // ES Module entry point }, "main": "./dist/index.cjs", // where to generate the CommonJS bundle "module": "./dist/index.esm.js", // where to generate the ESM bundle "unpkg": "./dist/index.umd.js", // where to generate the UMD bundle "types": "./dist/index.d.ts", // TypeScript declaration file for the package "scripts": { "build": "microbundle", // compiles "source" to "main", "module", "unpkg" "dev": "microbundle watch" // re-build when source files change } ... Derleme betiğini çalıştırın npm run build Çıktı tam olarak bildirdiğimiz dosyaları içermelidir. package.json Ve işte, ilk paketimizi yaptık. Daha karmaşık senaryolara bir göz atalım. Kitaplığınıza React Ekleme React'ı kütüphanenize getirmek istiyorsanız kullanmaya devam edebilirsiniz ancak artık build komutunuz şu şekilde görünmelidir: microbundle microbundle --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --globals react/jsx-runtime=jsx Gelecekte kolaylık sağlamak için komutu betiğine ekleyin: package.json build // package.json ... "scripts": { "build": "microbundle --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --globals react/jsx-runtime=jsx" } ... Kullanıcı Arayüzü Bileşenleri için Storybook'u Kullanma Bir kullanıcı arayüzü kitaplığı oluştururken bileşenleri geliştirebileceğiniz, görselleştirebileceğiniz ve belgeleriniz için demo bileşenleri sağlayabileceğiniz bir sanal alana ihtiyacınız olabilir. İşte geliyor. Bileşenlerinizin çeşitli durumlarını kolayca tanımlayabileceğiniz, kendi kullanışlı arayüzü ve paketleyicisine sahip bir sanal alan. Bileşen durumunuzun her bir yakalamasına "hikaye" adı verilir. hikaye kitabı Belgelerinden alınan bu resim neye benzediğini gösteriyor: Storybook'u yüklemek oldukça basittir; sadece kütüphanenizin içindeki komutu çalıştırın: npx storybook@latest init Bu komut, Storybook için gerekli tüm bağımlılıkları yükleyecek, çalıştırılacak komut dosyalarını ekleyecek ve Storybook'u içinde oluşturacak, varsayılan yapılandırmaya sahip bir klasörü oluşturacak ve bazı hikaye örneklerini klasörüne ekleyecektir. package.json .storybook src/stories Şekillendirmeyi Kitaplığınıza Entegre Etme Stili iki yoldan biriyle ekleyebilirsiniz: CSS dosyası veya JS'de CSS. CSS dosyası kolay özelleştirmeye izin verir ancak ayrı bir ekleme gerektirir; JS'deki CSS ise stillendirmeyi basitleştirir ancak paket boyutunu artırır. CSS dosyası Src dizininde bir CSS dosyası oluşturun ve bunu root react bileşen dosyasına aktarın: // src/index.tsx import './styles.css'; export const MySuperComponent = () => { return ( <h1 className="title">Hi there!</h1> ) }; Şimdi build komutunu tekrar çalıştıralım. npm run build Ve içe aktarılan dosyanız klasöründe oluşturulacaktır: styles.css dist Harika! Gerekli stillere sahip bir CSS dosyası elde ettik. Ancak bu çözümde ufak bir rahatsızlık var. Paket kurulduktan sonra CSS dosyasının ayrıca eklenmesi gerekmektedir. Bu nedenle, kitaplığınızın kullanıcılarının CSS dosyanızı işlemek için bir CSS yükleyicisi (örneğin, web paketi için bir CSS yükleyicisi) kullanması gerekecektir ve kullanımları şu şekilde görünecektir: import { MySuperComponent } from 'my-super-library'; import 'my-super-library/dist/styles.css'; export const App = () => { return ( <MySuperComponent /> ); } JS'de CSS Bu amaçla gibi kütüphaneleri kullanabilirsiniz. Ve şöyle görünecek: styled-component import styled from 'styled-components'; const Title = styled.h1` font-size: 30px; font-weight: bold; `; export const MySuperComponent = () => { return ( <Title>Hi there!</Title> ) }; Bu çözüm sayesinde kullanıcıların bir CSS dosyasını içe aktarmalarına ve projeleri için özel bir yükleyici eklemelerine gerek kalmayacak. Kitaplığı yükledikten sonra bileşen kendi stiliyle birlikte gelecektir. Ancak bu, paket boyutunu artıracak ve kullanıcıların CSS seçicileri kullanarak öğeleri özelleştirmesini zorlaştıracaktır. Size en uygun seçeneği seçin. CSS dosyasını kullanmayı tercih ediyorum çünkü bu, kullanıcıların herhangi bir öğeyi CSS seçicilerle özelleştirmesine olanak tanıyor, paket boyutunu etkilemiyor ve daha hızlı çalışıyor. Ayrıntılı bir Dosyası Geliştirme README.md dosyası kitaplığınız, nasıl kurulacağı, temel kullanımı ve sahip olduğu özellikler hakkında bilgi sağlar. Bu genellikle geliştiricilerin deponuzla veya NPM paketinizle karşılaştıklarında okudukları ilk dosyadır, bu nedenle kısa ve bilgilendirici olmalıdır. README.md Aşağıdaki sırayla bir yapı oluşturmayı seviyorum: Başlık Süper kısa paket açıklaması Süslü istatistik rozetleri ( ) shields.io Kitaplığınız bir kullanıcı arayüzü bileşeniyse bir ekran görüntüsü ekleyin veya CodeSandbox'ta bir demo bağlantısı sağlayın Özellikler listesi Yükleme Rehberi Kullanımı olan kod parçaları Kitaplığınızın yapılandırma için kabul ettiği seçenekler ve destekler İlham almak için paketlerimdeki ve gibi dosyalarının örneklerine başvurabilirsiniz. dot-path-value react-nested-dropdown README.md Bağımlılık Yönetiminde Gezinme Bu önemli bir kısım çünkü yanlış yaparsanız kullanıcılar sürüm çakışmaları veya başka sorunlarla karşılaşabilir ve kitaplığınızı kaldırmak zorunda kalabilirler. Şimdi bağımlılık türleri arasındaki temel farklara bir göz atalım. "devDependencing'ler" yalnızca geliştirme amaçlıdır ve paketinize dahil edilmeyecektir. Örneğin, kullanıcıların kullanmasına gerek olmayan paket paketini yüklediyseniz, bunu devDependencing'de tutun; pakette görünmeyecektir. microbundle "bağımlılıklar" paketle birlikte kurulacaktır. Paketinizin kullanıcıların projelerinde çalışması için ihtiyaç duyduğu bağımlılıkları ekleyin. "React" gibi bazı bağımlılıkların kullanıcının projesine önceden yüklenmiş olabileceğini unutmayın. Paketinizde yinelenen bir "tepki" bulunması paket boyutunu artırabilir. “Akran Bağımlılıkları”nın işe yaradığı yer burasıdır. “peerDependencing'ler” paketinizin kullandığı ancak paketinize dahil etmeyeceği bağımlılıklardır. Paketiniz, kullanıcının projesinde sahip olduğu bağımlılığın sürümünü kullanacaktır. Temel olarak, eğer ekosistemi için bir kütüphane oluşturuyorsak, bir eş bağımlılığı belirtmeliyiz. Örneğin, bir React bileşeni oluşturuyorsanız React'ı eş bağımlılığı olarak ayarlayın. Takvimli bir React bileşeni geliştiriyorsanız, React'ı ve bir tarih hesaplama kütüphanesini (örneğin, date-fns)peerDependencing'ler olarak ekleyin. Kullanıcının projesinde belirtilen eş bağımlılığı yoksa, komutu bir uyarı görüntüler ancak bağımlılığı otomatik olarak yüklemez. npm install Nasıl göründüğüne dair sadece küçük bir örnek: // package.json ... "dependencies": { // libraries which will be installed along with your library "clsx": "^1.2.1" // just library for className combining }, "peerDependencies": { // user should have these packages installed "react": "^16.8.0 || ^17.0.0 || ^18.0.0" // user should have react 16.8+ version }, "devDependencies": { // won't be in user's bundle, these libraries just for your developing needs "@types/react": "^18.2.33", "react": "^18.2.0", // in case if we are using storybook, we need actual react library to render our components there "microbundle": "^0.15.1", }, ... Paketiniz için GitHub'u Kullanma Bir NPM paketi yayınlıyorsanız, bu onun herkese açık olacağı anlamına gelir (eğer ücretsiz bir hesabınız varsa). Kullanıcılardan geri bildirim toplamak amacıyla orijinal kodunuz için bir GitHub deposu oluşturabilirsiniz. İnsanlar orada sorun yaratabilir ve paketiniz hakkında sizinle iletişim kurabilir. Ayrıca yayınlarınızı tanımlayabilir ve birkaç yıldız kazanabilirsiniz! Bu adımı kesinlikle atlayabilirsiniz ancak bu, geliştirici kültürünün ayrılmaz bir parçasıdır ve açık kaynağa değerli bir katkı olabilir. Paketin Yayınlanması ve Bakımı Paketinizi yayınlamadan önce dosyanızın doğru şekilde yapılandırıldığından emin olmanız önemlidir. İzlenecek bazı önemli adımlar şunlardır: package.json Kitaplığınızın temel işlevlerini adlandırın ve açıklamaya çalışın. Örneğin: "name": "react-color-picker" GitHub deposu bilgilerini ekleyin (varsa): ... "homepage": "https://github.com/{your_repository}", "repository": { "type": "git", "url": "https://github.com/{your_repository}" }, "bugs": { "url": "https://github.com/{your_repository}/issues" }, ... yapılandırın: files ... "files": [ "dist", ], ... Kütüphaneniz kurulduğunda dahil edilecek dosyaları belirtmelisiniz. Genellikle klasörünün dahil edilmesi yeterlidir. node_modules dist ekleyin: keywords Anahtar kelimeler paketinizi tanımlayan ve NPM tarafından aramalar ve öneriler için kullanılan bir dizi dizedir. İnsanların arama yaparken kullanacağını tahmin ettiğiniz, paketinizle alakalı kelimeleri seçin. kütüphanemiz için anahtar kelimeler oluşturalım: sum ... "keywords": ["typescript", "math", "sum", "numbers", "arithmetic", "calculator", "calculation"] ... Kullanıcılar sıklıkla "matematik için yazı tipi kitaplığı" veya "tepki takvimi seçici" gibi terimleri arattıkları için teknolojilerinizi belirtmeniz önemlidir. Henüz yapmadıysanız bir hesabı oluşturun ve terminalinizde çalıştırın; hesabınızın kimliğini doğrulamak için talimatları izleyin. Varsayılan olarak paketinizin sürümü olacaktır; dosyasından kontrol edebilirsiniz. olarak değiştirmenizi öneririm. NPM npm login 1.0.0 package.json 0.0.1 çalıştırın ve işiniz bitti! Gelecekte sürümü güncellemek için, sürümü artırmak üzere komutunu kullanın ve ardından güncellenen paketi ile yayınlayın. npm publish npm version patch npm publish Çözüm Gördüğünüz gibi kendi kütüphanenizi oluşturmak çok kolay! Temel olarak, paketi oluşturmak ve sürdürmek için ihtiyacınız olan tek şey budur. Kitaplığınızı ile sınırlandırmakta zorlanıyorsanız daha spesifik bir yapılandırmayla kullanmanızı öneririm. microbundle rollup.js'yi NPM paketleri oluşturmak ve açık kaynağa katkıda bulunmak, tüm beceri seviyelerindeki geliştiriciler için ödüllendirici ve değerli bir deneyimdir. Kodunuzu toplulukla paylaşmanıza, çok fazla deneyim kazanmanıza ve çalışmalarınızdan oluşan bir portföy oluşturmanıza olanak tanır.
