393 okumalar

5 Yaşındaki Bir Çocuk Bu TypeScript SDK Geliştirme Kılavuzunu İzleyebilir ~ Bölüm 3: Test Uygulamaları Yapma

ile Syed Muhammad Yaseen4m2024/07/08

Çok uzun; Okumak

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.

featured image - 5 Yaşındaki Bir Çocuk Bu TypeScript SDK Geliştirme Kılavuzunu İzleyebilir ~ Bölüm 3: Test Uygulamaları Yapma

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: