হ্যালোওওওওও!  আপনি মহান করছেন আশা করি! এই SMY! 👋 আসুন সরাসরি 🚀 এ ঝাঁপ দেওয়া যাক  এটি আমাদের   পার্ট 3 যেখানে আমরা প্রতিক্রিয়া, ব্রাউজার, নোড এবং লিগ্যাসি নোডের জন্য পরীক্ষামূলক অ্যাপ তৈরি করতে ডুব দেব। SDK ডেভেলপমেন্ট সিরিজের  বিষয়বস্তু:  ⚡  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    - CJS আউটপুটের জন্য index.cjs    - ESM এর জন্য index.js    - ব্রাউজারগুলির জন্য 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    , একটি প্রতিক্রিয়া অ্যাপ তৈরি করুন, উদাহরণস্বরূপ, vite সহ: example-apps   npm create vite@latest  সফলভাবে একটি প্রতিক্রিয়া অ্যাপ তৈরি করার পরে, আমাদের SDK লিঙ্ক করতে প্রতিক্রিয়া রুট ফোল্ডারে নিম্নলিখিত কমান্ডটি চালান।   npm link ts-lib    এর জায়গায়, এটি package.json-এ আপনার SDK/লাইব্রেরির নাম হওয়া উচিত। ts-lib  React অ্যাপ তৈরি করার পর,   এর মতো একটি কম্পোনেন্ট ফাইল খুলুন এবং নিচের মত SDK ইন্টিগ্রেট করুন: App.jsx   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;  প্রতিক্রিয়া অ্যাপটি চালান এবং কনসোলে যান; এটি নিম্নলিখিত মত হওয়া উচিত:   মোড়ক উম্মচন:  আমরা বিভিন্ন পরিবেশে আমাদের SDK তৈরি এবং চালানোর পদক্ষেপগুলি সম্পূর্ণ করেছি৷  আমাদের SDK প্রকাশ করতে পার্ট 4-এ যান।  .....  এখন, আপনি আপনার নিজস্ব SDK তৈরি করার জ্ঞান দিয়ে সজ্জিত। শুভ কোডিং! 🚀  এটা, লোকেরা! আশা করি এটি আপনার জন্য একটি ভাল পড়া ছিল. ধন্যবাদ! ✨  👉 আমাকে অনুসরণ করুন   গিটহাব   লিঙ্কডইন

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

গল্পের মূল ভাষায় এই অডিও তৈরি!

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

Make resilience your competitive advantage

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

About Author

মন্তব্য

আসে ট্যাগ

এই নিবন্ধটি উপস্থাপন করা হয়েছে

Related Stories

বিটকয়েন UTXO এর মডেল, একটি অনন্য ইকোসিস্টেমকে শক্তিশালী করে

হ্যাকারনুন লেখার প্রতিযোগিতা জিততে চান? #crypto-api প্রতিযোগিতার বিজয়ীরা কী সুপারিশ করেন তা এখানে

সেলিং দ্য ওয়াটারস: ডেটা লেক সহ প্রোডাকশন-গ্রেড RAG অ্যাপ্লিকেশন তৈরি করা

ফোরাম থেকে ফিড পর্যন্ত: কীভাবে সোশ্যাল মিডিয়া অ্যালগরিদম ডিজিটাল ইন্টারঅ্যাকশনকে আকার দেয়

বিটকয়েন UTXO এর মডেল, একটি অনন্য ইকোসিস্টেমকে শক্তিশালী করে

হ্যাকারনুন লেখার প্রতিযোগিতা জিততে চান? #crypto-api প্রতিযোগিতার বিজয়ীরা কী সুপারিশ করেন তা এখানে

সেলিং দ্য ওয়াটারস: ডেটা লেক সহ প্রোডাকশন-গ্রেড RAG অ্যাপ্লিকেশন তৈরি করা

ফোরাম থেকে ফিড পর্যন্ত: কীভাবে সোশ্যাল মিডিয়া অ্যালগরিদম ডিজিটাল ইন্টারঅ্যাকশনকে আকার দেয়

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps