TypeScript SDK Geliştirme: 5 Yaşındaki Bir Çocuk Bunu Adım Adım Takip Edebilir ~ Bölüm 1: İlk MVP'miz

Merhaba!

Umarım harika gidiyorsundur! Bu SMY'dir! 👋 Hemen içeri girelim 🚀

İçindekiler:

• ⚡ Some Background of SDK Development
• ⚡ Developing and running our first version

1️⃣ Ne -

SDK (bazen kitaplık olarak da bilinir), teknolojiden ek özellikler elde etmek için uygulamalarda eklenti görevi görür.

2️⃣ Neden -

TypeScript ile SDK geliştirme, uzun vadede tür güvenliği ve bakımı nedeniyle uzun süre boyunca güvenilirlik sunar.

3️⃣ Nasıl -

SDK'yı oluşturmak için gereken temel adımlar şunlardır:

1. Projeyi doğru iş akışı ayarlarıyla başlatmak.
2. Bundler'ı seçmek ve amacını anlamak.
3. SDK'yı farklı ortamlarda çalıştırmak için ESM, CJS, IIFE UMD'yi anlama.
4. NPM, anlamsal sürüm oluşturma ve Lisans üzerinde kitaplık olarak yayınlama.
5. SPA'lar için NPM ve Tarayıcılar için CDN.

Bölüm 1'de temel bir anlayış elde etmek için ilk temel SDK'mızı oluşturacağız.

Adım 1: Projeyi Başlatın

Projeyi yeni bir klasöre ayarlamak için aşağıdaki komutu çalıştırın:

 npm init -y

"-y" tüm takip istemlerine varsayılan olarak evet değerini verir. Yazar, lisans, sürüm vb. gibi bilgileri daha sonra Package.json'da değiştirebilirsiniz.

package.json adresine gidin ve en son EcmaScript Modül sistemi (ESM) ile çalışmak için type: module ekleyin.

package.json dosyanız aşağıdaki gibi görünmelidir:

 { "name": "ts-lib", "version": "1.0.0", "description": "SDK development tutorial", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "type": "module", "keywords": [], "author": "", "license": "ISC" }

Adım 2: Temel Geliştirici Kitaplıklarını Kurun

1. TypeScript
2. @types/node - TypeScript'i NodeJS ile çalıştırmak için.
3. tsup - TypeScript kitaplıklarınızı paketlemenin en basit ve en hızlı yolu.

KOPYALA

 npm i typescript @types/node tsup -D

Adım 3: TypeScript Ayarları için tsconfig kurun

Projenin kökünde bir tsconfig.json dosyası oluşturun.

KOPYALA

 touch tsconfig.json

Dosyaya gidin ve aşağıdaki yapılandırmayı yapıştırın:

 { "compilerOptions": { /* Base Options: */ "esModuleInterop": true, "allowImportingTsExtensions": true, "emitDeclarationOnly": true, "skipLibCheck": true, "target": "es2022", "allowJs": true, "resolveJsonModule": true, "moduleDetection": "force", "isolatedModules": true, "verbatimModuleSyntax": true, /* Strictness */ "strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true, /* If transpiling with TypeScript: */ "module": "NodeNext", "sourceMap": true, "outDir": "dist", /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"] }, "exclude": ["node_modules", "dist"] }

Hakkında daha ayrıntılı bilgi edinmek için her bir mülkün üzerine gelin.

Burada anlaşılması gereken temel şey şudur:

 "module": "NodeNext", "sourceMap": true, "outDir": "dist",

1. " NodeNext kitaplık yazmak için doğru seçenektir çünkü yalnızca paketleyicilerde çalışan ancak Node.js'de çökecek modül belirticilerle ESM yaymanızı engeller. Geleneksel kod yazarken, sağduyuyu kullanarak ve yüksek kaliteli bağımlılıklara güvenirken, çıktı genellikle paketleyiciler ve diğer çalışma zamanlarıyla oldukça uyumludur." Bununla ilgili daha fazla bilgiyi buradan edinebilirsiniz: https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/

   
   

2. sourceMap - Kaynak dosyaların oluşturulmasını etkinleştirir. Bu dosyalar, hata ayıklayıcıların ve diğer araçların, yayılan JavaScript dosyalarıyla çalışırken orijinal TypeScript kaynak kodunu görüntülemesine olanak tanır. Üretim için devre dışı bırakabilirsiniz.

   
   

3. outDir - Yayılan tüm dosyalar için bir çıktı klasörü belirtin.

 /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"]

1. declaration - Projenizdeki TypeScript ve JavaScript dosyalarından .d.ts dosyaları oluşturun.

   
   

2. lib - Hedef çalışma zamanı ortamını tanımlayan bir grup paketlenmiş kitaplık bildirim dosyası belirtin. es2022 React gibi düğüm uygulamaları içindir ve kütüphaneyi tarayıcıda çalıştırmak için dom & dom.iterable .

Adım 4: İlk Kodumuzu Yazın

Bir index.ts dosyası oluşturun ve aşağıdaki temel kodu yazın:

 const add = (a: number, b: number): number => a + b; const subtract = (a: number, b: number): number => a - b; export { add, subtract };

İlk kodumuzu oluşturun:

KOPYALA

 tsup ./index.ts

Artık index.cjs çıktı dosyasına sahip bir dist klasörümüz olduğunu görebilirsiniz.

İlk SDK'mızı entegre edip çalıştıralım!

Bir app.js dosyası oluşturun ve aşağıdaki kodu yapıştırın:

 import { add, subtract } from "./dist/index.cjs"; console.log(add(1, 2)); console.log(subtract(2, 1));

SDK'mızı yayınlamadığımız için doğrudan yerel yapıya bağlanıyoruz.

Şimdi ilk uygulamamızı çalıştırın

 node app.js

Aşağıdaki çıktıyı görmelisiniz:

 3 1

Tebrikler 🎉🥳 🚀🚀🚀 İlk SDK'mızı oluşturduk ve çalıştırdık!

Özet:

İlk SDK'mızı oluşturmak ve çalıştırmak için temel adımları az önce tamamladık. Temel bir klasör yapısı oluşturacağımız ve bir Harici API uç noktası entegre edeceğimiz Bölüm 2'ye gidin 🚀

.....

Artık kendi SDK'nızı oluşturabilecek bilgi birikimine sahipsiniz. Mutlu kodlama! 🚀

İşte bu kadar millet! Umarım sizin için iyi bir okuma olmuştur. Teşekkür ederim! ✨

👉 Beni takip et

GitHub

LinkedIn