Merhaba!
Umarım harika gidiyorsundur! Bu SMY'dir! 👋 Hemen içeri girelim 🚀
Bu, reaksiyon, tarayıcı, düğüm ve eski düğüm için test uygulamaları oluşturmaya odaklanacağımız SDK geliştirme serimizin 3. Bölümüdür.
İçindekiler:
- ⚡
Setting up tsup for different execution environments - ⚡
Creating our apps
Adım 1: tsup Farklı Ortamlar için Ayarlama
Projenin kökünde tsup.config.ts dosyasını oluşturun ve aşağıdaki içeriği yapıştırın:
import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, }); clean - Her derlemeden önce çıktı dizinini temizleyin.
dts - TypeScript için tür tanımları.
entry - giriş noktasını belirtme.
format - eski sürümler için cjs , daha yeni düğüm projeleri için esm ve tarayıcılar için iife .
minify - kodumuzu küçültür ve paket boyutunu küçültür.
tsup otomatik olarak bu dosyayı arayacağından ve her şeyi bizim için halledeceğinden ekstra bir yapılandırmaya gerek yoktur :)
Şimdi build komutundan çıkın ve yeniden çalıştırın.
npm run build
dist klasörümüzde aşağıdaki çıktıyı göreceksiniz.
index.cjs - CJS çıktısı için
index.js - ESM için
index.global.js - tarayıcılar için
2. Adım: Bir Düğüm Uygulaması Oluşturun
example-apps/Node bir index.js dosyası oluşturun. Aşağıdaki içeriği yapıştırın:
import sdk from "../../dist/index.js"; console.log(await sdk.fetchUsers());
Şimdi dosyayı ayrı bir terminaldeki bir düğümle çalıştırın ve klasöre gidin:
node index.js
Çıkışı terminalde göreceksiniz.
3. Adım: Eski Bir Düğüm Uygulaması Oluşturun
example-apps/Legacy-Node bir index.cjs dosyası oluşturun ve aşağıdaki içeriği yapıştırın:
const sdk = require("../../dist/index.cjs"); sdk.default.fetchUsers().then((users) => console.log(users));
Şimdi dosyayı ayrı bir terminaldeki bir düğümle çalıştırın ve klasöre gidin:
node index.cjs
Çıkışı terminalde göreceksiniz.
4. Adım: Tarayıcı Uygulaması Oluşturun
example-apps/Browser bir index.html dosyası oluşturun ve aşağıdaki içeriği yapıştırın:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <script src="../../dist/index.global.js"></script> </head> <body> This is a Test HTML <script> sdk.fetchUsers().then((users) => console.log(users)); </script> </body> </html>
Dosyayı tarayıcıda açın, inceleme öğesinin konsol sekmesinde aşağıdaki yanıtı görmelisiniz:
Adım 5: Bir React Uygulaması Oluşturun
Yayınlamadan projeler için kitaplık görevi görecek SDK'mıza bir Bağlantı oluşturun.
npm link
example-apps , örneğin vite ile bir tepki uygulaması oluşturun:
npm create vite@latest
Başarılı bir reaksiyon uygulaması oluşturduktan sonra, SDK'mızı bağlamak için React kök klasöründe aşağıdaki komutu çalıştırın.
npm link ts-lib ts-lib yerine package.json dosyasındaki SDK/Kütüphane adınız olmalıdır.
React uygulamasını oluşturduktan sonra App.jsx gibi bir bileşen dosyası açın ve SDK'yı aşağıdaki gibi entegre edin:
import sdk from "ts-lib"; console.log(await sdk.fetchUsers());
Tam görüntü:
import { useState } from "react"; import reactLogo from "./assets/react.svg"; import viteLogo from "/vite.svg"; import "./App.css"; import sdk from "ts-lib"; console.log(await sdk.fetchUsers()); function App() { const [count, setCount] = useState(0); return ( <> <div> <a href="https://vitejs.dev" target="_blank"> <img src={viteLogo} className="logo" alt="Vite logo" /> </a> <a href="https://react.dev" target="_blank"> <img src={reactLogo} className="logo react" alt="React logo" /> </a> </div> <h1>Vite + React</h1> <div className="card"> <button onClick={() => setCount((count) => count + 1)}> count is {count} </button> <p> Edit <code>src/App.tsx</code> and save to test HMR </p> </div> <p className="read-the-docs"> Click on the Vite and React logos to learn more </p> </> ); } export default App;
Reaksiyon Uygulamasını çalıştırın ve konsola gidin; aşağıdaki gibi görünmelidir:
Özet:
SDK'mızı farklı ortamlarda oluşturup çalıştırma adımlarını yeni tamamladık.
SDK'mızı yayınlamak için Bölüm 4'e gidin.
.....
Artık kendi SDK'nızı oluşturacak bilgiyle donatıldınız. Mutlu kodlama! 🚀
İşte bu kadar millet! Umarım sizin için iyi bir okuma olmuştur. Teşekkür ederim! ✨
👉 Beni takip et
