टाइपस्क्रिप्ट SDK विकास: एक 5 वर्षीय बच्चा भी इसे चरण-दर-चरण समझ सकता है ~ भाग 1: हमारा पहला MVP

हेलो!

आशा है आप बढ़िया होंगे! यह SMY है! 👋 चलिए शुरू करते हैं 🚀

विषय-सूची:

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

1️⃣ क्या -

एसडीके (जिसे कभी-कभी लाइब्रेरी के रूप में भी जाना जाता है) प्रौद्योगिकी से अतिरिक्त सुविधाएं प्राप्त करने के लिए अनुप्रयोगों में प्लग-इन के रूप में कार्य करता है।

2️⃣ क्यों -

टाइपस्क्रिप्ट के साथ SDK विकास, प्रकार सुरक्षा और दीर्घकालिक रखरखाव के कारण लंबे समय तक विश्वसनीयता प्रदान करता है।

3️⃣ कैसे -

SDK बनाने के लिए आवश्यक मूलभूत चरण निम्नलिखित हैं:

1. सही वर्कफ़्लो सेटिंग्स के साथ प्रोजेक्ट को आरंभ करना.
2. बंडलर का चयन करना, और उसका उद्देश्य समझना।
3. विभिन्न वातावरणों पर SDK चलाने के लिए ESM, CJS, IIFE UMD को समझना।
4. एनपीएम, सिमेंटिक संस्करण और लाइसेंस पर लाइब्रेरी के रूप में प्रकाशन।
5. एसपीए के लिए एनपीएम और ब्राउज़रों के लिए सीडीएन।

भाग 1 में, हम बुनियादी समझ हासिल करने के लिए अपना पहला बुनियादी SDK बनाने जा रहे हैं।

चरण 1: प्रोजेक्ट आरंभ करें

प्रोजेक्ट को नए फ़ोल्डर में सेट करने के लिए निम्नलिखित कमांड चलाएँ:

 npm init -y

"-y" सभी अनुवर्ती संकेतों के लिए डिफ़ॉल्ट रूप से हाँ होता है। आप इसे बाद में Package.json में बदल सकते हैं जैसे कि लेखक, लाइसेंस, संस्करण, आदि।

नवीनतम EcmaScript मॉड्यूल सिस्टम (ESM) के साथ काम करने के लिए package.json पर जाएं और 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 - अपने टाइपस्क्रिप्ट लाइब्रेरीज़ को बंडल करने का सबसे सरल और तेज़ तरीका।

कॉपी

 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 - स्रोत फ़ाइलों के निर्माण को सक्षम करता है। ये फ़ाइलें डीबगर्स और अन्य उपकरणों को उत्सर्जित जावास्क्रिप्ट फ़ाइलों के साथ काम करते समय मूल TypeScript स्रोत कोड प्रदर्शित करने की अनुमति देती हैं। आप इसे उत्पादन के लिए अक्षम कर सकते हैं।

   
   

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 रिएक्ट जैसे नोड अनुप्रयोगों के लिए है, और 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

अब आप देख सकते हैं कि हमारे पास एक dist फ़ोल्डर है जिसमें आउटपुट फ़ाइल index.cjs है

आइये अपना पहला 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 बनाने के लिए ज्ञान से लैस हैं। हैप्पी कोडिंग! 🚀

बस इतना ही, दोस्तों! आशा है कि यह आपके लिए एक अच्छा लेख रहा होगा। धन्यवाद! ✨

👉 मुझे फॉलो करें

GitHub

Linkedin