প্রতিক্রিয়া, টাইপস্ক্রিপ্ট এবং সিএসএস মডিউল সহ দক্ষ এনপিএম প্যাকেজ তৈরি করা: একটি ব্যাপক নির্দেশিকা

পুনঃব্যবহারযোগ্য npm প্যাকেজ তৈরি করা আপনার উন্নয়ন প্রক্রিয়াকে আরও দক্ষ এবং আনন্দদায়ক করে তুলতে পারে। এই নিবন্ধে, আমরা React, TypeScript, CSS মডিউল এবং অন্যান্য টুল ব্যবহার করে একটি আধুনিক এবং শক্তিশালী প্রজেক্ট সেটআপ তৈরি করার মাধ্যমে আপনাকে গাইড করব।

আমরা শুরু করার আগে, আপনি এখানে উত্স কোড খুঁজে পেতে পারেন: https://github.com/helgastogova/npm-react-typescript-template . এই সংগ্রহস্থলটি প্রতিক্রিয়া এবং টাইপস্ক্রিপ্ট ব্যবহার করে npm প্যাকেজ তৈরির জন্য একটি ভিত্তি হিসাবে কাজ করে। এটি একটি বিল্ড প্রক্রিয়া এবং একটি আধুনিক উন্নয়ন কর্মপ্রবাহের জন্য প্রস্তাবিত প্যাকেজগুলির একটি সেট সহ প্রি-কনফিগার করা হয়েছে৷

মূল বৈশিষ্ট্য অন্তর্ভুক্ত:

1. প্রতিক্রিয়া এবং টাইপস্ক্রিপ্ট : শক্তিশালী ধরনের নিরাপত্তা এবং একটি উচ্চতর বিকাশকারী অভিজ্ঞতা সহ আধুনিক UI বিকাশ।
2. CSS মডিউল : উপাদানগুলিকে বিচ্ছিন্নভাবে স্টাইল করা, CSS দ্বন্দ্ব এড়ানো এবং মডুলার ডিজাইন সক্ষম করা।
3. ESLint : জাভাস্ক্রিপ্ট এবং প্রতিক্রিয়ার সর্বোত্তম অনুশীলনগুলি মেনে চলার মাধ্যমে কোডের গুণমান নিশ্চিত করা।
4. রোলআপ : বিতরণের জন্য একক ফাইলে প্রতিক্রিয়া এবং টাইপস্ক্রিপ্ট কোডকে দক্ষতার সাথে একত্রিত করা।
5. পোস্টসিএসএস : পরবর্তী প্রজন্মের সিএসএস বৈশিষ্ট্যগুলি ব্যবহার করা এবং ব্রাউজার সামঞ্জস্য পরিচালনা করা।
6. আকারের সীমা : আপনার লাইব্রেরির আকার নিরীক্ষণ করা এবং দুর্ঘটনাজনিত আকারের ফোলা প্রতিরোধ করা।

আসুন আরও ব্যাপকভাবে প্রতিটি টুলের মধ্যে ডুব দেওয়া যাক।

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}'" }

npm run lint দিয়ে লিন্টার চালান। ESLint আপনার TypeScript ফাইলের মাধ্যমে স্ক্যান করবে এবং যেকোনো সম্ভাব্য সমস্যা সম্পর্কে আপনাকে সতর্ক করবে। এটি বিশেষ করে বড় কোডবেসের জন্য সুবিধাজনক যেখানে ছোট ত্রুটি বা অসঙ্গতিগুলি প্রবেশ করা সহজ।

রোলআপ

রোলআপ হল আপনার কোডের ব্যক্তিগত ফিটনেস প্রশিক্ষক। এটি আপনার জাভাস্ক্রিপ্ট, টাইপস্ক্রিপ্ট এবং সিএসএস নেয় এবং সেগুলিকে বন্টনের জন্য প্রস্তুত একটি চর্বিহীন, দক্ষ প্যাকেজে বান্ডিল করে।

এটি লাইটওয়েট এবং দ্রুত, তবে আসল সুবিধাটি এর "গাছ কাঁপানোর" ক্ষমতা থেকে আসে। রোলআপ চূড়ান্ত বান্ডেল থেকে অব্যবহৃত কোড মুছে ফেলতে পারে, আপনার প্যাকেজকে যতটা সম্ভব চর্বিহীন করে তোলে। আপনার রোলআপ কনফিগারেশন কেমন হতে পারে তার একটি উদাহরণ এখানে দেওয়া হল:

 // 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, }), ], };

পোস্টসিএসএস

পোস্টসিএসএস হল একটি টাইম-ট্রাভেলারের মতো, যা আপনাকে ভবিষ্যতের সিনট্যাক্স এবং বৈশিষ্ট্যগুলি ব্যবহার করে সিএসএস লিখতে দেয়। তারপরে এটি সময়ের সাথে ফিরে যায় (তাই কথা বলতে), এই আধুনিক শৈলীগুলিকে কোডে রূপান্তরিত করে যা এমনকি পুরানো ব্রাউজাররাও বুঝতে পারে।

আপনি উপরের রোলআপ কনফিগারেশনে পোস্টসিএসএসকে কার্যকর করতে দেখতে পারেন। rollup-plugin-postcss ব্যবহার করে, আপনার আধুনিক CSS রূপান্তরিত হয়েছে এবং আপনার চূড়ান্ত বান্ডিলে অন্তর্ভুক্ত করা হয়েছে। এর সৌন্দর্য হল আপনি ব্রাউজার সামঞ্জস্যের বিষয়ে চিন্তা না করেই লেটেস্ট ফিচার ব্যবহার করে CSS লিখতে পারেন।

আকার সীমা

সাইজ লিমিট হল সদা-সতর্ক প্রহরী, নিশ্চিত করুন যে আপনার লাইব্রেরি খুব বেশি ফুলে উঠবে না। এটি ব্যবহারকারীদের দ্বারা ডাউনলোড করা JavaScript এবং CSS উভয় যোগ করে আপনার লাইব্রেরির প্রকৃত খরচ গণনা করে। এটি একটি মূল্যবান টুল যা আপনাকে আপনার বান্ডিলের আকার চেক রাখতে সাহায্য করবে।

আপনার package.json এ:

 "scripts": { "size": "size-limit", }, "size-limit": [ { "path": "dist/*.js", "limit": "10 KB" } ]

তারপরে আপনি আপনার বান্ডেলের আকার পরীক্ষা করতে npm run size চালাতে পারেন। যদি এটি আপনার সেট করা সীমা অতিক্রম করে (এই ক্ষেত্রে, 10 KB), স্ক্রিপ্ট একটি ত্রুটি নিক্ষেপ করবে। আপনি অজান্তে আপনার ব্যবহারকারীদের ডাউনলোডের সময় যোগ করছেন না তা নিশ্চিত করার এটি একটি দুর্দান্ত উপায়।

সেটআপ

এই টেমপ্লেট ব্যবহার শুরু করতে, সংগ্রহস্থল ক্লোন করুন:

 git clone https://github.com/helgastogova/npm-react-typescript-template.git

ডিরেক্টরিতে নেভিগেট করুন:

 cd npm-react-typescript-template

নির্ভরতা ইনস্টল করুন:

 npm install

আপনি আপনার প্যাকেজ তৈরি করা শুরু করতে প্রস্তুত! এন্ট্রি পয়েন্ট হল src/index.tsx

প্যাকেজ নির্মাণ

আপনার নিজস্ব উপাদান তৈরি করার পরে এবং যখন আপনি বিতরণের জন্য আপনার প্যাকেজ তৈরি করতে প্রস্তুত হন, তখন চালান:

 npm run build

আপনার নির্মিত প্যাকেজটি dist ডিরেক্টরিতে থাকবে, npm-এ প্রকাশের জন্য প্রস্তুত।

npm-এ প্রকাশ করা হচ্ছে

নিশ্চিত করুন যে আপনি আপনার package.json এ name ক্ষেত্রটি আপনার পছন্দসই প্যাকেজের নামের সাথে সেট করেছেন। এছাড়াও, প্রতিটি নতুন প্রকাশের আগে সংস্করণ নম্বর আপডেট করতে ভুলবেন না। এটি হয়ে গেলে, ব্যবহার করে npm এ লগ ইন করুন:

 npm login

আপনার ব্যবহারকারীর নাম, পাসওয়ার্ড, এবং ইমেল লিখুন. একবার লগ ইন করার পরে, আপনি আপনার প্যাকেজ প্রকাশ করতে পারেন:

 npm publish

এখন আপনি npmjs লাইব্রেরিতে আপনার উপাদান প্রকাশ করেছেন, এবং লোকেরা এটি ব্যবহার করা শুরু করতে পারে। তুমি অসাধারণ!

শুভ কোডিং!