TypeScript SDK ডেভেলপমেন্ট: একজন 5-বছর বয়সী এই ধাপে ধাপে অনুসরণ করতে পারে ~ পার্ট 1: আমাদের প্রথম MVP

হ্যালোওওওও!

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

বিষয়বস্তু:

• ⚡ Some Background of SDK Development
• ⚡ Developing and running our first version

1️⃣ কি -

SDK (কখনও কখনও লাইব্রেরি নামেও পরিচিত) প্রযুক্তি থেকে অতিরিক্ত বৈশিষ্ট্যগুলি পেতে অ্যাপ্লিকেশনগুলিতে একটি প্লাগ-ইন হিসাবে কাজ করে।

2️⃣ কেন -

টাইপস্ক্রিপ্টের সাথে SDK বিকাশ দীর্ঘ সময়ের জন্য টাইপ নিরাপত্তা এবং রক্ষণাবেক্ষণের কারণে দীর্ঘ সময়ের জন্য নির্ভরযোগ্যতা প্রদান করে।

3️⃣ কিভাবে -

SDK নির্মাণের জন্য প্রয়োজনীয় মৌলিক পদক্ষেপগুলি হল:

1. সঠিক ওয়ার্কফ্লো সেটিংস সহ প্রকল্পটি শুরু করা হচ্ছে।
2. বান্ডলার নির্বাচন করা এবং এর উদ্দেশ্য বোঝা।
3. বিভিন্ন পরিবেশে SDK চালানোর জন্য ESM, CJS, IIFE UMD বোঝা।
4. NPM, শব্দার্থিক সংস্করণ এবং লাইসেন্সে একটি লাইব্রেরি হিসাবে প্রকাশ করা।
5. SPA-এর জন্য NPM এবং ব্রাউজারের জন্য CDN।

পার্ট 1-এ, আমরা একটি প্রাথমিক বোঝার জন্য আমাদের প্রথম মৌলিক SDK তৈরি করতে যাচ্ছি।

ধাপ 1: প্রকল্প শুরু করুন

একটি নতুন ফোল্ডারে প্রকল্প সেট করতে নিম্নলিখিত কমান্ড চালান:

 npm init -y

সমস্ত ফলো-আপ প্রম্পটের জন্য "-y" ডিফল্ট হ্যাঁ করে। আপনি পরে Package.json-এ লেখক, লাইসেন্স, সংস্করণ ইত্যাদি পরিবর্তন করতে পারেন।

package.json এ যান এবং লেটেস্ট EcmaScript মডিউল সিস্টেম (ESM) এর সাথে কাজ করতে type: module যোগ করুন।

আপনার package.json নিম্নলিখিত মত দেখতে হবে:

 { "name": "ts-lib", "version": "1.0.0", "description": "SDK development tutorial", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "type": "module", "keywords": [], "author": "", "license": "ISC" }

ধাপ 2: ফান্ডামেন্টাল ডেভ লাইব্রেরি ইনস্টল করুন

1. টাইপস্ক্রিপ্ট
2. @types/node - NodeJS এর সাথে TypeScript কাজ করতে।
3. tsup - আপনার TypeScript লাইব্রেরি বান্ডিল করার সবচেয়ে সহজ এবং দ্রুততম উপায়।

কপি

 npm i typescript @types/node tsup -D

ধাপ 3: TypeScript সেটিংসের জন্য tsconfig সেটআপ করুন

প্রকল্পের মূলে একটি tsconfig.json ফাইল তৈরি করুন।

কপি

 touch tsconfig.json

ফাইলটিতে যান এবং নিম্নলিখিত কনফিগারেশনটি আটকান:

 { "compilerOptions": { /* Base Options: */ "esModuleInterop": true, "allowImportingTsExtensions": true, "emitDeclarationOnly": true, "skipLibCheck": true, "target": "es2022", "allowJs": true, "resolveJsonModule": true, "moduleDetection": "force", "isolatedModules": true, "verbatimModuleSyntax": true, /* Strictness */ "strict": true, "noUncheckedIndexedAccess": true, "noImplicitOverride": true, /* If transpiling with TypeScript: */ "module": "NodeNext", "sourceMap": true, "outDir": "dist", /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"] }, "exclude": ["node_modules", "dist"] }

আপনি এটি সম্পর্কে আরও গভীরভাবে জানতে প্রতিটি সম্পত্তির উপর ঘুরতে পারেন।

এখানে বুঝতে মৌলিক জিনিস হল:

 "module": "NodeNext", "sourceMap": true, "outDir": "dist",

1. " NodeNext হল লাইব্রেরি লেখার জন্য সঠিক বিকল্প কারণ এটি আপনাকে মডিউল স্পেসিফায়ারের সাথে ESM নির্গত করতে বাধা দেয় যা শুধুমাত্র বান্ডলারে কাজ করে কিন্তু Node.js-এ ক্র্যাশ হয়ে যাবে। প্রচলিত কোড লেখার সময়, সাধারণ জ্ঞান ব্যবহার করে এবং উচ্চ-মানের নির্ভরতার উপর নির্ভর করে, এর আউটপুট সাধারণত বান্ডলার এবং অন্যান্য রানটাইমের সাথে অত্যন্ত সামঞ্জস্যপূর্ণ।" আপনি এখানে এটি সম্পর্কে আরও জানতে পারেন: https://blog.andrewbran.ch/is-nodenext-right-for-libraries-that-dont-target-node-js/

   
   

2. sourceMap - সোর্স ফাইল তৈরি করতে সক্ষম করে। এই ফাইলগুলি নির্গত জাভাস্ক্রিপ্ট ফাইলগুলির সাথে কাজ করার সময় ডিবাগার এবং অন্যান্য সরঞ্জামগুলিকে আসল টাইপস্ক্রিপ্ট সোর্স কোড প্রদর্শন করার অনুমতি দেয়৷ আপনি উত্পাদনের জন্য এটি নিষ্ক্রিয় করতে পারেন।

   
   

3. outDir - সমস্ত নির্গত ফাইলের জন্য একটি আউটপুট ফোল্ডার নির্দিষ্ট করুন।

 /* AND if you're building for a library: */ "declaration": true, /* If your code runs in the DOM: */ "lib": ["es2022", "dom", "dom.iterable"]

1. declaration - আপনার প্রকল্পে টাইপস্ক্রিপ্ট এবং জাভাস্ক্রিপ্ট ফাইল থেকে .d.ts ফাইল তৈরি করুন।

   
   

2. lib - বান্ডিল করা লাইব্রেরি ঘোষণা ফাইলের একটি সেট নির্দিষ্ট করুন যা লক্ষ্য রানটাইম পরিবেশ বর্ণনা করে। es2022 হল নোড অ্যাপ্লিকেশনের জন্য যেমন React, এবং dom & dom.iterable ব্রাউজারে লাইব্রেরি চালানোর জন্য।

ধাপ 4: আমাদের প্রথম কোড লিখুন

একটি index.ts ফাইল তৈরি করুন এবং নিম্নলিখিত মৌলিক কোড লিখুন:

 const add = (a: number, b: number): number => a + b; const subtract = (a: number, b: number): number => a - b; export { add, subtract };

আমাদের প্রথম কোড তৈরি করুন:

কপি

 tsup ./index.ts

আপনি এখন দেখতে পারেন আমাদের কাছে একটি আউটপুট ফাইল index.cjs সহ একটি dist ফোল্ডার রয়েছে

আসুন একত্রিত করি এবং আমাদের প্রথম SDK চালাই!

একটি app.js ফাইল তৈরি করুন এবং নিম্নলিখিত কোড পেস্ট করুন:

 import { add, subtract } from "./dist/index.cjs"; console.log(add(1, 2)); console.log(subtract(2, 1));

যেহেতু আমরা আমাদের SDK প্রকাশ করিনি, তাই আমরা সরাসরি স্থানীয় বিল্ডের সাথে লিঙ্ক করছি।

এখন, আমাদের প্রথম অ্যাপ চালান

 node app.js

আপনি নিম্নলিখিত আউটপুট দেখতে হবে:

 3 1

অভিনন্দন 🎉🥳 🚀🚀🚀 আমরা এইমাত্র আমাদের প্রথম SDK তৈরি করেছি এবং চালিয়েছি!

মোড়ক উম্মচন:

আমরা আমাদের প্রথম SDK তৈরি এবং চালানোর প্রাথমিক ধাপগুলি সম্পূর্ণ করেছি৷ পার্ট 2-এ যান, যেখানে আমরা একটি বেসিক ফোল্ডার স্ট্রাকচার তৈরি করব এবং একটি এক্সটার্নাল API এন্ডপয়েন্ট একীভূত করব 🚀

.....

এখন, আপনি আপনার নিজস্ব SDK তৈরি করতে জ্ঞান দিয়ে সজ্জিত৷ শুভ কোডিং! 🚀

এটা, লোকেরা! এটা আপনার জন্য একটি ভাল পড়া ছিল আশা করি. ধন্যবাদ! ✨

👉 আমাকে অনুসরণ করুন

গিটহাব

লিঙ্কডইন