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   3. Bölümüdür. SDK geliştirme serimizin  İçindekiler:  ⚡  Setting up tsup for different execution environments  ⚡  Creating our apps  Adım 1:   Farklı Ortamlar için Ayarlama tsup  Projenin kökünde   dosyasını oluşturun ve aşağıdaki içeriği yapıştırın: tsup.config.ts   import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, });    - Her derlemeden önce çıktı dizinini temizleyin. clean    - TypeScript için tür tanımları. dts    - giriş noktasını belirtme. entry    - eski sürümler için   , daha yeni düğüm projeleri için   ve tarayıcılar için   . format cjs esm iife    - kodumuzu küçültür ve paket boyutunu küçültür. minify    otomatik olarak bu dosyayı arayacağından ve her şeyi bizim için halledeceğinden ekstra bir yapılandırmaya gerek yoktur :) tsup  Şimdi   komutundan çıkın ve yeniden çalıştırın. build   npm run build    klasörümüzde aşağıdaki çıktıyı göreceksiniz.  dist    - CJS çıktısı için index.cjs    - ESM için index.js    - tarayıcılar için index.global.js  2. Adım: Bir Düğüm Uygulaması Oluşturun    bir   dosyası oluşturun. Aşağıdaki içeriği yapıştırın: example-apps/Node index.js   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    bir   dosyası oluşturun ve aşağıdaki içeriği yapıştırın: example-apps/Legacy-Node index.cjs   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    bir   dosyası oluşturun ve aşağıdaki içeriği yapıştırın: example-apps/Browser index.html   <!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    , örneğin vite ile bir tepki uygulaması oluşturun: example-apps   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    yerine package.json dosyasındaki SDK/Kütüphane adınız olmalıdır. ts-lib  React uygulamasını oluşturduktan sonra   gibi bir bileşen dosyası açın ve SDK'yı aşağıdaki gibi entegre edin: App.jsx   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   GitHub   LinkedIn

This story contains new, firsthand information uncovered by the writer.

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Read My Stories

View my Portfolio

Full Stack Engineer

Bu ses hikayenin orijinal dilinde üretilmiştir!

Çok uzun; Okumak

Make resilience your competitive advantage

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

About Author

YORUMLAR

ETİKETLERİ ASIN

BU YAZI

Related Stories

Görünmeyen Katmanlar: Kullanıcı Görüşmeleri Neden Yeri doldurulamaz bir Varlıktır?

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

Telegram: Kripto Adası'nın anakaraya olan köprüsü

Dijital Göçebeler Dinleyin: Tayland'ın Yeni DTV Vizesi Hakkında Bilmeniz Gerekenler

Görünmeyen Katmanlar: Kullanıcı Görüşmeleri Neden Yeri doldurulamaz bir Varlıktır?

Yapay Zekanın Gücünü Ortaya Çıkarıyoruz. En Son Tekniklerin Sistematik Bir İncelemesi: Özet ve Giriş

Telegram: Kripto Adası'nın anakaraya olan köprüsü

Dijital Göçebeler Dinleyin: Tayland'ın Yeni DTV Vizesi Hakkında Bilmeniz Gerekenler

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps