পুনঃব্যবহারযোগ্য npm প্যাকেজ তৈরি করা আপনার উন্নয়ন প্রক্রিয়াকে আরও দক্ষ এবং আনন্দদায়ক করে তুলতে পারে। এই নিবন্ধে, আমরা React, TypeScript, CSS মডিউল এবং অন্যান্য টুল ব্যবহার করে একটি আধুনিক এবং শক্তিশালী প্রজেক্ট সেটআপ তৈরি করার মাধ্যমে আপনাকে গাইড করব। আমরা শুরু করার আগে, আপনি এখানে উত্স কোড খুঁজে পেতে পারেন: . এই সংগ্রহস্থলটি প্রতিক্রিয়া এবং টাইপস্ক্রিপ্ট ব্যবহার করে npm প্যাকেজ তৈরির জন্য একটি ভিত্তি হিসাবে কাজ করে। এটি একটি বিল্ড প্রক্রিয়া এবং একটি আধুনিক উন্নয়ন কর্মপ্রবাহের জন্য প্রস্তাবিত প্যাকেজগুলির একটি সেট সহ প্রি-কনফিগার করা হয়েছে৷ https://github.com/helgastogova/npm-react-typescript-template মূল বৈশিষ্ট্য অন্তর্ভুক্ত: : শক্তিশালী ধরনের নিরাপত্তা এবং একটি উচ্চতর বিকাশকারী অভিজ্ঞতা সহ আধুনিক UI বিকাশ। প্রতিক্রিয়া এবং টাইপস্ক্রিপ্ট : উপাদানগুলিকে বিচ্ছিন্নভাবে স্টাইল করা, CSS দ্বন্দ্ব এড়ানো এবং মডুলার ডিজাইন সক্ষম করা। CSS মডিউল : জাভাস্ক্রিপ্ট এবং প্রতিক্রিয়ার সর্বোত্তম অনুশীলনগুলি মেনে চলার মাধ্যমে কোডের গুণমান নিশ্চিত করা। ESLint : বিতরণের জন্য একক ফাইলে প্রতিক্রিয়া এবং টাইপস্ক্রিপ্ট কোডকে দক্ষতার সাথে একত্রিত করা। রোলআপ : পরবর্তী প্রজন্মের সিএসএস বৈশিষ্ট্যগুলি ব্যবহার করা এবং ব্রাউজার সামঞ্জস্য পরিচালনা করা। পোস্টসিএসএস : আপনার লাইব্রেরির আকার নিরীক্ষণ করা এবং দুর্ঘটনাজনিত আকারের ফোলা প্রতিরোধ করা। আকারের সীমা আসুন আরও ব্যাপকভাবে প্রতিটি টুলের মধ্যে ডুব দেওয়া যাক। CSS মডিউল CSS মডিউলগুলি স্টাইলিং বিশৃঙ্খলার ক্ষেত্রে নিরাপত্তার আলোকবর্তিকা হিসাবে কাজ করে। তারা আপনার শৈলীর জন্য স্থানীয় স্কোপিং প্রয়োগ করে, দ্বন্দ্ব এবং ওভারল্যাপ সমস্যাগুলি এড়ায়। প্রতিটি CSS মডিউল কম্পোনেন্টের মধ্যে "এনক্যাপসুলেটেড" হবে, আপনার সংজ্ঞায়িত স্টাইলগুলি যাতে অনিচ্ছাকৃতভাবে অন্য উপাদানগুলিকে প্রভাবিত না করে তা নিশ্চিত করে৷ এই সহজ উপাদানটি বিবেচনা করুন যেখানে আমরা CSS মডিউল ব্যবহার করি: // TestComponent.tsx import React from 'react'; import s from './TestComponent.module.css'; type TestComponentProps = { text?: string; }; export const TestComponent: React.FC<TestComponentProps> = ({ text }) => { return <div className={s.root}>{text ?? 'Hello!'}</div>; }; এবং এর সাথে সম্পর্কিত CSS মডিউল: /* TestComponent.module.css */ .root { background-color: pink; padding: 20px; border-radius: 8px; } এই ক্ষেত্রে, থেকে ক্লাস ভিন্ন মডিউলের অন্য কোনো ক্লাসকে প্রভাবিত করবে না। TestComponent.module.css .root .root ইএসলিন্ট হল একটি বাতিঘরের মতো যা আপনাকে কোডের একটি উত্তাল সমুদ্রের মধ্য দিয়ে গাইড করে। এটি কোডের গুণমান বজায় রাখতে, ত্রুটি ধরা এবং সমস্যা হওয়ার আগে সেরা কোডিং অনুশীলনগুলি প্রয়োগ করতে সহায়তা করে। ESLint আপনার এ, আপনার আছে: package.json "scripts": { "lint": "eslint './src/**/*.{ts,tsx}'" } দিয়ে লিন্টার চালান। ESLint আপনার TypeScript ফাইলের মাধ্যমে স্ক্যান করবে এবং যেকোনো সম্ভাব্য সমস্যা সম্পর্কে আপনাকে সতর্ক করবে। এটি বিশেষ করে বড় কোডবেসের জন্য সুবিধাজনক যেখানে ছোট ত্রুটি বা অসঙ্গতিগুলি প্রবেশ করা সহজ। npm run lint রোলআপ হল আপনার কোডের ব্যক্তিগত ফিটনেস প্রশিক্ষক। এটি আপনার জাভাস্ক্রিপ্ট, টাইপস্ক্রিপ্ট এবং সিএসএস নেয় এবং সেগুলিকে বন্টনের জন্য প্রস্তুত একটি চর্বিহীন, দক্ষ প্যাকেজে বান্ডিল করে। রোলআপ এটি লাইটওয়েট এবং দ্রুত, তবে আসল সুবিধাটি এর "গাছ কাঁপানোর" ক্ষমতা থেকে আসে। রোলআপ চূড়ান্ত বান্ডেল থেকে অব্যবহৃত কোড মুছে ফেলতে পারে, আপনার প্যাকেজকে যতটা সম্ভব চর্বিহীন করে তোলে। আপনার রোলআপ কনফিগারেশন কেমন হতে পারে তার একটি উদাহরণ এখানে দেওয়া হল: // rollup.config.js const postcss = require('rollup-plugin-postcss'); const typescript = require('@rollup/plugin-typescript'); const peerDepsExternal = require('rollup-plugin-peer-deps-external'); const resolve = require('@rollup/plugin-node-resolve').default; const commonjs = require('@rollup/plugin-commonjs'); module.exports = { input: 'src/index.tsx', output: { dir: 'dist', format: 'cjs', sourcemap: true, }, plugins: [ peerDepsExternal(), resolve(), typescript(), commonjs(), postcss({ modules: true, }), ], }; পোস্টসিএসএস হল একটি টাইম-ট্রাভেলারের মতো, যা আপনাকে ভবিষ্যতের সিনট্যাক্স এবং বৈশিষ্ট্যগুলি ব্যবহার করে সিএসএস লিখতে দেয়। তারপরে এটি সময়ের সাথে ফিরে যায় (তাই কথা বলতে), এই আধুনিক শৈলীগুলিকে কোডে রূপান্তরিত করে যা এমনকি পুরানো ব্রাউজাররাও বুঝতে পারে। পোস্টসিএসএস আপনি উপরের রোলআপ কনফিগারেশনে পোস্টসিএসএসকে কার্যকর করতে দেখতে পারেন। ব্যবহার করে, আপনার আধুনিক CSS রূপান্তরিত হয়েছে এবং আপনার চূড়ান্ত বান্ডিলে অন্তর্ভুক্ত করা হয়েছে। এর সৌন্দর্য হল আপনি ব্রাউজার সামঞ্জস্যের বিষয়ে চিন্তা না করেই লেটেস্ট ফিচার ব্যবহার করে CSS লিখতে পারেন। rollup-plugin-postcss আকার সীমা হল সদা-সতর্ক প্রহরী, নিশ্চিত করুন যে আপনার লাইব্রেরি খুব বেশি ফুলে উঠবে না। এটি ব্যবহারকারীদের দ্বারা ডাউনলোড করা JavaScript এবং CSS উভয় যোগ করে আপনার লাইব্রেরির প্রকৃত খরচ গণনা করে। এটি একটি মূল্যবান টুল যা আপনাকে আপনার বান্ডিলের আকার চেক রাখতে সাহায্য করবে। সাইজ লিমিট আপনার এ: package.json "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ] তারপরে আপনি আপনার বান্ডেলের আকার পরীক্ষা করতে চালাতে পারেন। যদি এটি আপনার সেট করা সীমা অতিক্রম করে (এই ক্ষেত্রে, 10 KB), স্ক্রিপ্ট একটি ত্রুটি নিক্ষেপ করবে। আপনি অজান্তে আপনার ব্যবহারকারীদের ডাউনলোডের সময় যোগ করছেন না তা নিশ্চিত করার এটি একটি দুর্দান্ত উপায়। npm run size সেটআপ এই টেমপ্লেট ব্যবহার শুরু করতে, সংগ্রহস্থল ক্লোন করুন: git clone https://github.com/helgastogova/npm-react-typescript-template.git ডিরেক্টরিতে নেভিগেট করুন: cd npm-react-typescript-template নির্ভরতা ইনস্টল করুন: npm install আপনি আপনার প্যাকেজ তৈরি করা শুরু করতে প্রস্তুত! এন্ট্রি পয়েন্ট হল src/index.tsx প্যাকেজ নির্মাণ আপনার নিজস্ব উপাদান তৈরি করার পরে এবং যখন আপনি বিতরণের জন্য আপনার প্যাকেজ তৈরি করতে প্রস্তুত হন, তখন চালান: npm run build আপনার নির্মিত প্যাকেজটি ডিরেক্টরিতে থাকবে, npm-এ প্রকাশের জন্য প্রস্তুত। dist npm-এ প্রকাশ করা হচ্ছে নিশ্চিত করুন যে আপনি আপনার এ ক্ষেত্রটি আপনার পছন্দসই প্যাকেজের নামের সাথে সেট করেছেন। এছাড়াও, প্রতিটি নতুন প্রকাশের আগে সংস্করণ নম্বর আপডেট করতে ভুলবেন না। এটি হয়ে গেলে, ব্যবহার করে npm এ লগ ইন করুন: package.json name npm login আপনার ব্যবহারকারীর নাম, পাসওয়ার্ড, এবং ইমেল লিখুন. একবার লগ ইন করার পরে, আপনি আপনার প্যাকেজ প্রকাশ করতে পারেন: npm publish এখন আপনি আপনার উপাদান প্রকাশ করেছেন, এবং লোকেরা এটি ব্যবহার করা শুরু করতে পারে। তুমি অসাধারণ! npmjs লাইব্রেরিতে শুভ কোডিং!
