হ্যালোওওওওও!
আপনি মহান করছেন আশা করি! এই 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 তৈরি করার জ্ঞান দিয়ে সজ্জিত। শুভ কোডিং! 🚀
এটা, লোকেরা! আশা করি এটি আপনার জন্য একটি ভাল পড়া ছিল. ধন্যবাদ! ✨
👉 আমাকে অনুসরণ করুন
