393 পড়া

একজন 5 বছর বয়সী এই TypeScript SDK ডেভেলপমেন্ট গাইড অনুসরণ করতে পারে ~ পার্ট 3: টেস্ট অ্যাপ তৈরি করা

দ্বারা Syed Muhammad Yaseen4m2024/07/08

অতিদীর্ঘ; পড়তে

এটি আমাদের SDK ডেভেলপমেন্ট সিরিজের পার্ট 3 যেখানে আমরা প্রতিক্রিয়া, ব্রাউজার, নোড এবং লিগ্যাসি নোডের জন্য পরীক্ষামূলক অ্যাপ তৈরি করতে ডুব দেব।

featured image - একজন 5 বছর বয়সী এই TypeScript SDK ডেভেলপমেন্ট গাইড অনুসরণ করতে পারে ~ পার্ট 3: টেস্ট অ্যাপ তৈরি করা

হ্যালোওওওওও!

আপনি মহান করছেন আশা করি! এই SMY! 👋 আসুন সরাসরি 🚀 এ ঝাঁপ দেওয়া যাক

বিষয়বস্তু:

⚡ Setting up tsup for different execution environments
⚡ Creating our apps

ধাপ 1: বিভিন্ন পরিবেশের জন্য `tsup` সেট আপ করা

প্রকল্পের মূলে tsup.config.ts ফাইল তৈরি করুন এবং নিম্নলিখিত বিষয়বস্তু পেস্ট করুন:

 import { defineConfig } from "tsup"; export default defineConfig({ clean: true, dts: true, entry: ["src/index.ts"], format: ["cjs", "esm", "iife"], minify: true, });

clean - প্রতিটি বিল্ডের আগে আউটপুট ডিরেক্টরি পরিষ্কার করুন।

dts - টাইপস্ক্রিপ্টের জন্য টাইপ সংজ্ঞা।

entry - এন্ট্রি পয়েন্ট নির্দিষ্ট করা।

format - উত্তরাধিকারের জন্য cjs , নতুন নোড প্রকল্পের জন্য esm এবং ব্রাউজারগুলির জন্য iife ।

minify - আমাদের কোড ছোট করে এবং বান্ডিলের আকার হ্রাস করে।

কোনও অতিরিক্ত কনফিগারেশনের প্রয়োজন নেই, কারণ tsup স্বয়ংক্রিয়ভাবে এই ফাইলটি সন্ধান করবে এবং আমাদের জন্য সবকিছু পরিচালনা করবে :)

এখন, প্রস্থান করুন এবং build কমান্ড পুনরায় চালু করুন।

 npm run build

আপনি আমাদের dist ফোল্ডারে নিম্নলিখিত আউটপুট দেখতে পাবেন।

index.cjs - CJS আউটপুটের জন্য

index.js - ESM এর জন্য

index.global.js - ব্রাউজারগুলির জন্য

ধাপ 2: একটি নোড অ্যাপ তৈরি করুন

example-apps/Node , একটি index.js ফাইল তৈরি করুন। নিম্নলিখিত বিষয়বস্তু পেস্ট করুন:

 import sdk from "../../dist/index.js"; console.log(await sdk.fetchUsers());

এখন, একটি পৃথক টার্মিনালে একটি নোড সহ ফাইলটি চালান এবং ফোল্ডারে যান:

 node index.js

আপনি টার্মিনালে আউটপুট দেখতে পাবেন।

ধাপ 3: একটি লিগ্যাসি নোড অ্যাপ তৈরি করুন

example-apps/Legacy-Node , একটি index.cjs ফাইল তৈরি করুন এবং নিম্নলিখিত বিষয়বস্তু পেস্ট করুন:

 const sdk = require("../../dist/index.cjs"); sdk.default.fetchUsers().then((users) => console.log(users));

এখন, একটি পৃথক টার্মিনালে একটি নোড সহ ফাইলটি চালান এবং ফোল্ডারে যান:

 node index.cjs

আপনি টার্মিনালে আউটপুট দেখতে পাবেন।

ধাপ 4: একটি ব্রাউজার অ্যাপ তৈরি করুন

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>

ব্রাউজারে ফাইলটি খুলুন, আপনি পরিদর্শন উপাদানের কনসোল ট্যাবে নিম্নলিখিত প্রতিক্রিয়া দেখতে পাবেন:

ধাপ 5: একটি প্রতিক্রিয়া অ্যাপ তৈরি করুন

প্রকাশনা ছাড়াই প্রকল্পগুলির জন্য একটি লাইব্রেরি হিসাবে আচরণ করতে আমাদের SDK-এর একটি লিঙ্ক তৈরি করুন৷

 npm link

example-apps , একটি প্রতিক্রিয়া অ্যাপ তৈরি করুন, উদাহরণস্বরূপ, vite সহ:

 npm create vite@latest

সফলভাবে একটি প্রতিক্রিয়া অ্যাপ তৈরি করার পরে, আমাদের SDK লিঙ্ক করতে প্রতিক্রিয়া রুট ফোল্ডারে নিম্নলিখিত কমান্ডটি চালান।

 npm link ts-lib

ts-lib এর জায়গায়, এটি package.json-এ আপনার SDK/লাইব্রেরির নাম হওয়া উচিত।

React অ্যাপ তৈরি করার পর, App.jsx এর মতো একটি কম্পোনেন্ট ফাইল খুলুন এবং নিচের মত SDK ইন্টিগ্রেট করুন:

 import sdk from "ts-lib"; console.log(await sdk.fetchUsers());

পুরা দেখা:

 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;

প্রতিক্রিয়া অ্যাপটি চালান এবং কনসোলে যান; এটি নিম্নলিখিত মত হওয়া উচিত: