আপনার প্রথম NPM প্যাকেজ তৈরি করার সবচেয়ে সহজ উপায়

এই নির্দেশিকাটি আপনাকে একটি মাইক্রোবান্ডেল ব্যবহার করে শুরু থেকে শেষ পর্যন্ত আপনার NPM প্যাকেজ তৈরি এবং প্রকাশ করার সবচেয়ে সহজ প্রক্রিয়ার মধ্য দিয়ে নিয়ে যাবে।

এর microbundle সম্পর্কে একটু কথা বলা যাক। আমি এটিকে সাধারণ লাইব্রেরিগুলির জন্য বিশেষভাবে কার্যকর বলে মনে করি কারণ আপনাকে কনফিগারেশন সম্পর্কে চিন্তা করতে হবে না, আপনাকে আপনার প্যাকেজ বিকাশে ফোকাস করার অনুমতি দেয়।

এখানে এর বৈশিষ্ট্যগুলির একটি সংক্ষিপ্ত তালিকা রয়েছে:

• অন্তর্নির্মিত কনফিগারেশন; আপনাকে যা করতে হবে তা হল package.json এ একটি "রপ্তানি" ক্ষেত্র যোগ করুন
• tsconfig.json ছাড়াই বক্সের বাইরে TypeScript সমর্থন
• একাধিক আউটপুট ফরম্যাট (CJS, UMD, এবং ESM)
• অন্তর্নির্মিত Terser কম্প্রেশন

মূলত, microbundle rollup.js এর উপরে তৈরি করা হয়। আমি এই নিবন্ধে উল্লেখ করার চেয়ে আপনার যদি আরও জটিল লাইব্রেরি তৈরি করা থাকে তবে আপনি একটি বিশুদ্ধ rollup.js কনফিগারেশন ব্যবহার করার কথা বিবেচনা করতে পারেন।

আপনার প্যাকেজ শুরু করা হচ্ছে

একটি উদাহরণ হিসাবে, দুটি সংখ্যা যোগ করার জন্য একটি সাধারণ লাইব্রেরি তৈরি করা যাক, যা শুধুমাত্র একটি ফাংশন sum রপ্তানি করবে।

1. প্রকল্পের জন্য একটি ফোল্ডার তৈরি করুন, এবং package.json তৈরি করতে ডিফল্ট মান সহ npm init চালান

   
   

2. src ফোল্ডারে index.ts তৈরি করুন

    // src/index.ts export function sum(a: number, b: number) { return a + b; }

3. microbundle ইনস্টল করুন

   npm i -D microbundle

   
   

4. নিম্নলিখিত মানগুলির সাথে package.json আপডেট করুন:

    // package.json ... "type": "module", "source": "src/index.ts", // your source code "exports": { "types": "./dist/index.d.ts", // TypeScript declaration file "require": "./dist/index.cjs", // CommonJS entry point "default": "./dist/index.esm.js" // ES Module entry point }, "main": "./dist/index.cjs", // where to generate the CommonJS bundle "module": "./dist/index.esm.js", // where to generate the ESM bundle "unpkg": "./dist/index.umd.js", // where to generate the UMD bundle "types": "./dist/index.d.ts", // TypeScript declaration file for the package "scripts": { "build": "microbundle", // compiles "source" to "main", "module", "unpkg" "dev": "microbundle watch" // re-build when source files change } ...

5. বিল্ড স্ক্রিপ্ট চালান

   npm run build

   
   

   আউটপুটে ঠিক সেই ফাইলগুলি থাকা উচিত যা আমরা package.json এ ঘোষণা করেছি

   

এবং ভয়ে, আমরা আমাদের প্রথম প্যাকেজ তৈরি করেছি। চলুন আরও জটিল পরিস্থিতিতে কটাক্ষপাত করা যাক.

আপনার লাইব্রেরিতে প্রতিক্রিয়া যোগ করা

আপনি যদি আপনার লাইব্রেরিতে প্রতিক্রিয়া আনতে চান তবে আপনি এখনও এটি ব্যবহার করতে পারেন microbundle , কিন্তু এখন, আপনার বিল্ড কমান্ডটি এইরকম হওয়া উচিত:

 microbundle --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --globals react/jsx-runtime=jsx

ভবিষ্যতের সুবিধার জন্য build স্ক্রিপ্টে package.json এ কমান্ড যোগ করুন:

 // package.json ... "scripts": { "build": "microbundle --jsx React.createElement --jsxFragment React.Fragment --jsxImportSource react --globals react/jsx-runtime=jsx" } ...

UI উপাদানগুলির জন্য স্টোরিবুক ব্যবহার করা

একটি UI লাইব্রেরি তৈরি করার সময়, আপনার একটি স্যান্ডবক্সের প্রয়োজন হতে পারে যেখানে আপনি বিকাশ করতে পারেন, উপাদানগুলি কল্পনা করতে পারেন এবং আপনার ডকুমেন্টেশনের জন্য ডেমো উপাদান সরবরাহ করতে পারেন৷

এখানে গল্পের বই আসে. এটি একটি নিজস্ব সুবিধাজনক ইন্টারফেস এবং বান্ডলার সহ একটি স্যান্ডবক্স, যেখানে আপনি সহজেই আপনার উপাদানগুলির বিভিন্ন অবস্থা বর্ণনা করতে পারেন। আপনার উপাদান অবস্থার প্রতিটি ক্যাপচারকে একটি "গল্প" বলা হয়।

এই ছবিটি, তাদের ডকুমেন্টেশন থেকে নেওয়া, এটি দেখতে কেমন তা দেখায়:

স্টোরিবুক ইনস্টল করা বেশ সহজ; শুধু আপনার লাইব্রেরির ভিতরে কমান্ড চালান:

 npx storybook@latest init

এই কমান্ডটি স্টোরিবুকের জন্য প্রয়োজনীয় সমস্ত নির্ভরতা ইনস্টল করবে, চালানোর জন্য স্ক্রিপ্ট যোগ করবে এবং package.json এ স্টোরিবুক তৈরি করবে, ডিফল্ট কনফিগারেশন সহ একটি ফোল্ডার .storybook তৈরি করবে এবং src/stories ফোল্ডারে গল্পের কিছু উদাহরণ যোগ করবে।

আপনার লাইব্রেরিতে স্টাইলিং একীভূত করা

আপনি দুটি উপায়ের একটিতে স্টাইলিং যোগ করতে পারেন: CSS ফাইল বা CSS-in-JS। CSS ফাইল সহজ কাস্টমাইজেশনের অনুমতি দেয় কিন্তু আলাদা অন্তর্ভুক্তির প্রয়োজন হয়, যেখানে CSS-in-JS স্টাইলিংকে সহজ করে কিন্তু বান্ডেলের আকার বাড়ায়।

• CSS ফাইল

  src ডিরেক্টরিতে একটি CSS ফাইল তৈরি করুন এবং এটি রুট প্রতিক্রিয়া উপাদান ফাইলে আমদানি করুন:

   // src/index.tsx import './styles.css'; export const MySuperComponent = () => { return ( <h1 className="title">Hi there!</h1> ) };

  
  

  সুতরাং, এর বিল্ড কমান্ড আবার রান করা যাক.

   npm run build

  
  

  এবং আপনার আমদানি করা styles.css ফাইলটি dist ফোল্ডারে তৈরি হবে:

  

  দারুণ! আমরা প্রয়োজনীয় স্টাইল সহ একটি CSS ফাইল পেয়েছি। যাইহোক, এই সমাধান সঙ্গে একটি সামান্য অসুবিধা আছে. প্যাকেজ ইনস্টল করার পরে CSS ফাইলটি আলাদাভাবে যোগ করতে হবে।

  
  

  অতএব, আপনার লাইব্রেরির ব্যবহারকারীদের আপনার CSS ফাইল পরিচালনা করার জন্য একটি CSS লোডার (যেমন, ওয়েবপ্যাকের জন্য একটি CSS-লোডার) ব্যবহার করতে হবে এবং তাদের ব্যবহার এইরকম দেখাবে:

   import { MySuperComponent } from 'my-super-library'; import 'my-super-library/dist/styles.css'; export const App = () => { return ( <MySuperComponent /> ); }

  
  

• সিএসএস-ইন-জেএস

  আপনি এই উদ্দেশ্যে স্টাইল-কম্পোনেন্টের মতো লাইব্রেরি ব্যবহার করতে পারেন। এবং এটি এই মত দেখাবে:

   import styled from 'styled-components'; const Title = styled.h1` font-size: 30px; font-weight: bold; `; export const MySuperComponent = () => { return ( <Title>Hi there!</Title> ) };

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

আপনার জন্য সবচেয়ে উপযুক্ত বিকল্পটি বেছে নিন। আমি CSS ফাইলটি ব্যবহার করতে পছন্দ করি কারণ এটি ব্যবহারকারীদের CSS নির্বাচকদের সাথে যেকোনো উপাদান কাস্টমাইজ করতে দেয়, বান্ডেলের আকারকে প্রভাবিত করে না এবং দ্রুত কাজ করে।

একটি বিস্তারিত README.md ফাইল তৈরি করা হচ্ছে

একটি README.md ফাইল আপনার লাইব্রেরি, এটি কীভাবে ইনস্টল করবেন, এর মৌলিক ব্যবহার এবং এতে থাকা বৈশিষ্ট্যগুলি সম্পর্কে তথ্য সরবরাহ করে। এটি প্রায়শই প্রথম ফাইল যা বিকাশকারীরা পড়ে যখন তারা আপনার সংগ্রহস্থল বা NPM প্যাকেজের মুখোমুখি হয়, তাই এটি সংক্ষিপ্ত এবং তথ্যপূর্ণ হওয়া উচিত।

আমি নিম্নলিখিত ক্রমে একটি কাঠামো তৈরি করতে চাই:

1. শিরোনাম
2. সুপার সংক্ষিপ্ত প্যাকেজ বিবরণ
3. অভিনব পরিসংখ্যান ব্যাজ ( shields.io )
4. আপনার লাইব্রেরি একটি UI উপাদান হলে, একটি স্ক্রিনশট অন্তর্ভুক্ত করুন বা CodeSandbox-এ একটি ডেমো লিঙ্ক প্রদান করুন
5. বৈশিষ্ট্য তালিকা
6. ইনস্টলেশন গাইড
7. ব্যবহার সহ কোড টুকরা
8. আপনার লাইব্রেরি কনফিগারেশনের জন্য গ্রহণ করে এমন বিকল্প এবং প্রপস

আপনি অনুপ্রেরণার জন্য আমার প্যাকেজ থেকে README.md ফাইলের উদাহরণগুলি উল্লেখ করতে পারেন, যেমন ডট-পাথ-মান এবং প্রতিক্রিয়া-নেস্টেড-ড্রপডাউন ।

নেভিগেটিং নির্ভরতা ব্যবস্থাপনা

এটি একটি গুরুত্বপূর্ণ অংশ কারণ আপনি যদি এটি ভুল করেন তবে ব্যবহারকারীরা সংস্করণ দ্বন্দ্ব বা অন্যান্য সমস্যার সম্মুখীন হতে পারে এবং তাদের আপনার লাইব্রেরি সরাতে হবে। সুতরাং, আসুন নির্ভরতার প্রকারের মধ্যে প্রধান পার্থক্যগুলি দেখুন।

• "devDependencies" শুধুমাত্র উন্নয়নের জন্য এবং আপনার বান্ডিলে অন্তর্ভুক্ত করা হবে না। উদাহরণস্বরূপ, যদি আপনার microbundle প্যাকেজ ইনস্টল করা থাকে, যা ব্যবহারকারীদের ব্যবহার করার প্রয়োজন নেই, তাহলে এটিকে devDependencies-এ রাখুন এবং এটি বান্ডেলে প্রদর্শিত হবে না।

• প্যাকেজের সাথে "নির্ভরতা" ইনস্টল করা হবে। আপনার প্যাকেজ ব্যবহারকারীদের প্রকল্পে কাজ করার জন্য প্রয়োজনীয় নির্ভরতা অন্তর্ভুক্ত করুন। নোট করুন যে কিছু নির্ভরতা, যেমন "প্রতিক্রিয়া" ইতিমধ্যেই ব্যবহারকারীর প্রকল্পে ইনস্টল করা হতে পারে। আপনার প্যাকেজে একটি ডুপ্লিকেট "প্রতিক্রিয়া" থাকলে বান্ডেলের আকার বাড়তে পারে। এখানেই "পিয়ার ডিপেনডেন্সি" কাজে আসে।

• "peerDependencies" হল নির্ভরতা যা আপনার প্যাকেজ ব্যবহার করে কিন্তু আপনার বান্ডেলে অন্তর্ভুক্ত হবে না। আপনার প্যাকেজ ব্যবহারকারীর তাদের প্রকল্পে থাকা নির্ভরতার সংস্করণটি ব্যবহার করবে।

  
  

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

  
  

  ব্যবহারকারীর যদি তাদের প্রকল্পে নির্দিষ্ট পিয়ার নির্ভরতা না থাকে, npm install কমান্ড একটি সতর্কতা প্রদর্শন করবে, কিন্তু এটি স্বয়ংক্রিয়ভাবে নির্ভরতা ইনস্টল করবে না।

এটি দেখতে কেমন তার একটি ছোট উদাহরণ:

 // package.json ... "dependencies": { // libraries which will be installed along with your library "clsx": "^1.2.1" // just library for className combining }, "peerDependencies": { // user should have these packages installed "react": "^16.8.0 || ^17.0.0 || ^18.0.0" // user should have react 16.8+ version }, "devDependencies": { // won't be in user's bundle, these libraries just for your developing needs "@types/react": "^18.2.33", "react": "^18.2.0", // in case if we are using storybook, we need actual react library to render our components there "microbundle": "^0.15.1", }, ...

আপনার প্যাকেজের জন্য GitHub ব্যবহার করা

আপনি যদি একটি NPM প্যাকেজ প্রকাশ করেন, এর মানে হল এটি সর্বজনীনভাবে অ্যাক্সেসযোগ্য হবে (যদি আপনার একটি বিনামূল্যে অ্যাকাউন্ট থাকে)। ব্যবহারকারীদের কাছ থেকে প্রতিক্রিয়া সংগ্রহ করতে, আপনি আপনার আসল কোডের জন্য একটি GitHub সংগ্রহস্থল তৈরি করতে পারেন। লোকেরা সমস্যা তৈরি করতে পারে এবং সেখানে আপনার প্যাকেজ সম্পর্কে আপনার সাথে যোগাযোগ করতে পারে। আপনি আপনার রিলিজ বর্ণনা করতে পারেন এবং কিছু তারকা পেতে পারেন!

আপনি অবশ্যই এই পদক্ষেপটি এড়িয়ে যেতে পারেন, তবে এটি বিকাশকারী সংস্কৃতির একটি অবিচ্ছেদ্য অংশ এবং ওপেন সোর্সে একটি মূল্যবান অবদান হতে পারে।

প্যাকেজ প্রকাশ ও রক্ষণাবেক্ষণ

আপনি আপনার প্যাকেজ প্রকাশ করার আগে, আপনার package.json ফাইলটি সঠিকভাবে কনফিগার করা হয়েছে তা নিশ্চিত করা অপরিহার্য। এখানে কিছু গুরুত্বপূর্ণ পদক্ষেপ অনুসরণ করতে হবে:

1. নাম দিন এবং আপনার লাইব্রেরির মূল কার্যকারিতা বর্ণনা করার চেষ্টা করুন। উদাহরণ স্বরূপ:

    "name": "react-color-picker"

   
   

2. GitHub সংগ্রহস্থলের তথ্য যোগ করুন (যদি এটি বিদ্যমান থাকে):

    ... "homepage": "https://github.com/{your_repository}", "repository": { "type": "git", "url": "https://github.com/{your_repository}" }, "bugs": { "url": "https://github.com/{your_repository}/issues" }, ...

   
   

3. files কনফিগার করুন:

    ... "files": [ "dist", ], ...

   আপনার লাইব্রেরি ইনস্টল হলে node_modules এ যে ফাইলগুলি অন্তর্ভুক্ত করা হবে তা আপনাকে নির্দিষ্ট করতে হবে। সাধারণত, dist ফোল্ডার সহ যথেষ্ট।

   
   

4. keywords যোগ করুন:

   কীওয়ার্ড হল স্ট্রিংগুলির একটি অ্যারে যা আপনার প্যাকেজ বর্ণনা করে এবং NPM দ্বারা অনুসন্ধান এবং সুপারিশের জন্য ব্যবহার করা হয়। আপনার প্যাকেজের সাথে প্রাসঙ্গিক শব্দ চয়ন করুন যা আপনি অনুমান করেন যে লোকেরা অনুসন্ধান করার সময় ব্যবহার করবে। আসুন আমাদের sum লাইব্রেরির জন্য কীওয়ার্ড তৈরি করি:

    ... "keywords": ["typescript", "math", "sum", "numbers", "arithmetic", "calculator", "calculation"] ...

   আপনার প্রযুক্তিগুলি নির্দিষ্ট করা গুরুত্বপূর্ণ কারণ ব্যবহারকারীরা প্রায়শই "গণিতের জন্য টাইপস্ক্রিপ্ট লাইব্রেরি" বা "প্রতিক্রিয়া ক্যালেন্ডার পিকার" এর মতো শব্দগুলি অনুসন্ধান করে৷

   
   

5. আপনার যদি ইতিমধ্যে না থাকে তবে একটি NPM অ্যাকাউন্ট তৈরি করুন এবং আপনার টার্মিনালে npm login চালান; আপনার অ্যাকাউন্ট প্রমাণীকরণের জন্য প্রম্পটগুলি অনুসরণ করুন। ডিফল্টরূপে, আপনার প্যাকেজের সংস্করণ হবে 1.0.0 ; আপনি package.json ফাইলে এটি পরীক্ষা করতে পারেন। আমি এটি 0.0.1 এ পরিবর্তন করার সুপারিশ করছি।

   
   

6. npm publish চালান, এবং আপনি সম্পন্ন! ভবিষ্যতে সংস্করণটি আপডেট করতে, সংস্করণটি বৃদ্ধি করতে npm version patch কমান্ডটি ব্যবহার করুন এবং তারপরে আপডেট করা প্যাকেজটি npm publish এর সাথে প্রকাশ করুন।

উপসংহার

আপনি দেখতে পাচ্ছেন, আপনার নিজের লাইব্রেরি তৈরি করা খুব সহজ! মূলত, প্যাকেজ তৈরি এবং রক্ষণাবেক্ষণের জন্য এটিই আপনার প্রয়োজন। আপনি যদি microbundle এর সাথে আপনার লাইব্রেরি সীমিত করতে সংগ্রাম করেন, আমি একটি আরো নির্দিষ্ট কনফিগারেশন সহ rollup.js ব্যবহার করার পরামর্শ দিই।

NPM প্যাকেজ তৈরি করা এবং ওপেন-সোর্সে অবদান রাখা সমস্ত দক্ষতা স্তরের বিকাশকারীদের জন্য একটি পুরস্কৃত এবং মূল্যবান অভিজ্ঞতা। এটি আপনাকে সম্প্রদায়ের সাথে আপনার কোড ভাগ করতে, প্রচুর অভিজ্ঞতা অর্জন করতে এবং আপনার কাজের একটি পোর্টফোলিও তৈরি করতে দেয়৷