हेलो!  आशा है आप बढ़िया होंगे! यह 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 बनाने के लिए ज्ञान से लैस हैं। हैप्पी कोडिंग! 🚀  बस इतना ही, दोस्तों! आशा है कि यह आपके लिए एक अच्छा लेख रहा होगा। धन्यवाद! ✨  👉 मुझे फॉलो करें   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

यह ऑडियो कहानी की मूल भाषा में निर्मित है!

बहुत लंबा; पढ़ने के लिए

Make resilience your competitive advantage

5 साल का बच्चा भी इस TypeScript SDK डेवलपमेंट गाइड को फॉलो कर सकता है ~ भाग 3: टेस्ट ऐप्स बनाना

About Author

टिप्पणियाँ

लेबल

इस लेख में चित्रित किया गया था

Related Stories

हैकरनून कोडेड: शीर्ष 10 देश जहां हैकरनून सबसे अधिक सक्रिय है

जलयात्रा: डेटा झीलों के साथ उत्पादन-ग्रेड आरएजी अनुप्रयोगों का विकास

फ़ोरम से फ़ीड तक: सोशल मीडिया एल्गोरिदम डिजिटल इंटरैक्शन को कैसे आकार देते हैं

क्लाउड सॉनेट 3.5 सिस्टम प्रॉम्प्ट लीक: एक फोरेंसिक विश्लेषण

हैकरनून कोडेड: शीर्ष 10 देश जहां हैकरनून सबसे अधिक सक्रिय है

जलयात्रा: डेटा झीलों के साथ उत्पादन-ग्रेड आरएजी अनुप्रयोगों का विकास

फ़ोरम से फ़ीड तक: सोशल मीडिया एल्गोरिदम डिजिटल इंटरैक्शन को कैसे आकार देते हैं

क्लाउड सॉनेट 3.5 सिस्टम प्रॉम्प्ट लीक: एक फोरेंसिक विश्लेषण

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps