چگونه یک بسته NPM برای React Native ایجاد کنیم؟

معرفی

در حوزه توسعه React Native، توانایی ایجاد و به اشتراک گذاری بسته های سفارشی npm می تواند گردش کار را به طور قابل توجهی ساده کند و قابلیت استفاده مجدد کد را افزایش دهد. این مقاله به عنوان یک راهنمای جامع به شما کمک می کند تا بسته npm خود را برای پروژه های React Native ایجاد کنید.

امروز، من به پیچیدگی های ایجاد یک بسته npm سفارشی و آپلود آن در فروشگاه/رجیستری npm می پردازم و به شما این امکان را می دهم که فرآیند توسعه خود را ساده کنید و از قدرت جمعی جامعه توسعه دهندگان استفاده کنید.

الزامات ایجاد بسته npm

قبل از شروع ایجاد بسته npm خود، مطمئن شوید که پیش نیازهای زیر را روی سیستم خود نصب و راه اندازی کرده اید:

1). حساب GitHub: داشتن یک حساب GitHub ضروری است زیرا کنترل نسخه را برای پایگاه کد شما فراهم می کند و همکاری با سایر توسعه دهندگان را تسهیل می کند. شما می توانید کد منبع بسته خود را در GitHub میزبانی کنید، آن را برای مخاطبان گسترده تری در دسترس قرار دهید و امکان مشارکت و بازخورد جامعه را فراهم کنید.

2). حساب NPM: برای انتشار بسته خود در رجیستری NPM، به یک حساب NPM نیاز دارید تا آن را برای دیگران نصب کرده و در پروژه های خود استفاده کنند. ایجاد یک حساب NPM رایگان و ساده است و فقط به اطلاعات اولیه مانند آدرس ایمیل و نام کاربری نیاز دارد.

3). آشنایی با React Native: درک کامل React Native برای توسعه کامپوننت ها یا ابزارهایی که به طور یکپارچه با پروژه های React Native ادغام می شوند بسیار مهم است. این شامل دانش چرخه عمر مؤلفه React Native، استایل، ناوبری، مدیریت حالت و ملاحظات خاص پلتفرم است.

4). آشنایی با TypeScript: TypeScript به طور فزاینده ای در اکوسیستم جاوا اسکریپت محبوب است و تایپ ثابت و خوانایی کد بهبود یافته را ارائه می دهد. آشنایی با TypeScript هنگام ایجاد بسته های npm مفید است، به خصوص اگر می خواهید تعاریف نوع برای API بسته خود ارائه دهید، تجربه توسعه دهنده و قابلیت اطمینان کد را بهبود می بخشد.

قبل از توسعه یک بسته سفارشی چه اقداماتی باید انجام شود؟

قبل از شروع به ایجاد یک بسته سفارشی، اطمینان حاصل کنید که هیچ بسته مشابه موجود در حال حاضر موجود یا منتشر نشده است. پلتفرم هایی مانند Git یا npm را جستجو کنید تا بسته های از قبل موجود با ماهیت مشابه را شناسایی کنید.

یک پروژه جدید ایجاد کنید

npx react-native init CustomButton

یک دکمه سفارشی ایجاد کنید

خوب، بیایید یک جزء دکمه سفارشی ایجاد کنیم

// File: src/components/CustomButton.js

import React from 'react';
import { TouchableOpacity, Text, StyleSheet } from 'react-native';

const CustomButton = ({ title, onPress }) => {
  return (
    
      {title}
    
  );
};

const styles = StyleSheet.create({
  button: {
    backgroundColor: '#007bff',
    padding: 10,
    borderRadius: 5,
  },
  buttonText: {
    color: '#fff',
    fontSize: 16,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

export default CustomButton;

بیایید با ایجاد بسته NPM شروع کنیم

ابتدا یک پوشه جدید در هر نقطه از رایانه ایجاد کنید. سپس، پوشه “src” یا هر فایل یا پوشه ضروری که جزء شما به آن نیاز دارد را در این پوشه جدید کپی کنید. در داخل پوشه دستور زیر را انجام دهید

بسته نهایی شما به این شکل است

توجه: مطمئن شوید که بسته های دیگری را که مؤلفه سفارشی شما به آن متکی است در بخش وابستگی ها ذکر کنید package.json فایل.

{
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.3",
    "react-native-other-lib": "^2.2.0"
  }
}

اگر کامپوننت سفارشی شما از هیچ بسته دیگری استفاده نمی کند، package.json شما به شکل زیر خواهد بود:

{
  "dependencies": {
    "react": "18.2.0",
    "react-native": "0.72.3"
  }
}

انتشار بسته شما

ترمینال را باز کنید و به دایرکتوری پروژه خود بروید (همان دایرکتوری و پوشه scr را بچسبانید) و دستور زیر را برای ورود به سیستم npm اجرا کنید. برای انتشار بسته خود در npm، با استفاده از:

npm login

سپس، بسته خود را با:

npm version 1.0.5 // must be unique version name  

npm publish --access public   

بسته شما اکنون منتشر شده و در دسترس دیگران است تا در پروژه های React Native خود نصب و استفاده کنند.