हेलो!
आशा है आप बढ़िया होंगे! यह SMY है! 👋 चलिए शुरू करते हैं 🚀
यह हमारी SDK विकास श्रृंखला का भाग 3 है, जहां हम रिएक्ट, ब्राउज़र, नोड और लीगेसी नोड के लिए परीक्षण ऐप्स बनाने में गोता लगाएंगे।
विषय-सूची:
- ⚡
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;
रिएक्ट ऐप चलाएं, और कंसोल पर जाएं; यह निम्नलिखित की तरह दिखना चाहिए:
ऊपर लपेटकर:
हमने अभी-अभी अपने SDK को विभिन्न वातावरणों में बनाने और चलाने के चरण पूरे किए हैं।
हमारे SDK को प्रकाशित करने के लिए भाग 4 पर जाएँ।
.....
अब, आप अपना खुद का SDK बनाने के लिए ज्ञान से लैस हैं। हैप्पी कोडिंग! 🚀
बस इतना ही, दोस्तों! आशा है कि यह आपके लिए एक अच्छा लेख रहा होगा। धन्यवाद! ✨
👉 मुझे फॉलो करें
