415 रीडिंग

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;

रिएक्ट ऐप चलाएं, और कंसोल पर जाएं; यह निम्नलिखित की तरह दिखना चाहिए: