آموزش نحوه تبدیل کامپوننت ری‌اکت به npm package

اگر می خواهید یک کامپوننت ریکت را به یک package در npm تبدیل کنید مطالعه این مقاله به شما توصیه می شود.

در این مقاله یک پروژه ریکت را از ابتدا راه اندازی می کنیم سپس یک کامپوننت تستی تعریف می کنیم و در ادامه آموزش آن را بعنوان یک package در کتابخانه npm منتشر خواهیم کرد.

ثبت نام در npm:

برای شروع کار باید با مراجعه به لینک زیر یک حساب کاربری در npm برای خود ایجاد کنید:

https://www.npmjs.com/signup

پس از ثبت نام در سایت npmjs و تائید آدرس ایمیل تان، صفحه زیر را مشاهده خواهید کرد:

مشاهده می کنید که در حال حاضر یعنی اول سپتامبر 2020 میلادی، تعداد 1,383,214 پکیج در npmjs منتشر شده است و این پکیج ها بیش از 21 میلیارد بار دانلود شده اند!

شما هم می توانید با مطالعه ادامه این مقاله و پیاده سازی مراحل آن، یک package به پکیج های منتشر شده در npmjs اضافه کنید.

نصب node:

برای ادامه کار باید node روی سیستم عامل شما نصب باشد. بدین منظور با کلیک روی لینک زیر node را نصب کنید:

https://nodejs.org/en/download/

تنظیمات فولدر پروژه:

برای ایجاد یک پروژه جدید در ریکت دستور زیر را در cmd اجرا کنید:

npx create-react-app project-name

بجای کلمه project-name نام دلخواه پروژه خود را تعریف کنید. ما در این مقاله نام rahkarino-pkg را در نظر گرفتیم. بهتر است ابتدا نام پکیج موردنظر را در کتابخانه npm سرچ کنیم. اگر قبلا کسی آن را تعریف نکرده است و نام موردنظر شما آزاد است از آن برای نام گذاری package ریکتی خود استفاده کنید.

تنظیمات فایل package.json:

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

کافیست محتوای فایل package.json در پروژه خود را با کد زیر جایگزین کنید. البته دقت کنید که اگر پروژه شما از قبل تعریف شده است مطمئنا محتوای آن با کد زیر متفاوت است. در اینصورت باید فایل پکیج جی‌سون پروژه تان را مطابق کد زیر آپدیت کنید:

{
    "name": "rahkarino-pkg",
    "version": "1.0.0",
    "description": "Convert React Component to npm package",
    "main": "./lib/RahkarinoPackage.js",
    "license": "MIT",
    "scripts": {
        "build": "webpack"
    },
    "peerDependencies": {
        "prop-types": "^15.6.0",
        "react": "^16.0.0",
        "react-dom": "^16.0.0"
    },
    "devDependencies": {
        "babel-core": "^6.21.0",
        "babel-loader": "^7.1.4",
        "babel-preset-env": "^1.6.1",
        "babel-preset-react": "^6.16.0",
        "babel-preset-stage-0": "^6.24.1",
        "path": "^0.12.7",
        "prop-types": "^15.6.0",
        "react": "^16.0.0",
        "react-dom": "^16.0.0",
        "webpack": "^4.5.0",
        "webpack-cli": "^3.2.1"
    }
}

فقط کافیست بخش های زیر را متناسب با پروژه خود تغییر دهید:

• Name: نام دلخواه برای پکیج تولیدی. دقت کنید که باید هم نام فولدرپروژه شما باشد.
• Description: توضیحات دلخواه برای پکیج تولیدی. در صورت نیاز می توانید این فیلد را کلا حذف کنید.
• Main: نام کامپوننت اصلی پروژه خود را باید در این قسمت تعریف کنید.

پس از آپدیت فایل پکیج جی سون cmd را روی فولدر پروژه ریکت خود باز کرده و دستور npm install را اجرا کنید. پس از اجرای این دستور، تمام کتابخانه های ذکر شده در کد بالا روی پروژه شما نصب خواهند شد. مانند webpack و prop-types و…

ایجاد فایل تنظیمات وب پک بنام webpack.config.js:

یک فایل بنام webpack.config.js در فولدر اصلی پروژه تان تعریف کرده و محتوای زیر را برای آن تعریف کنید (اگر این فایل از قبل در سورس کد پروژه شما وجود دارد آن را مطابق کد زیر ویرایش کنید):

var path = require('path');
module.exports = {
    mode: 'production',
    entry: './src/RahkarinoPackage.js',
    output: {
        path: path.resolve('lib'),
        filename: 'RahkarinoPackage.js',
        libraryTarget: 'commonjs2'
    },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /(node_modules)/,
                use: 'babel-loader'
            }
        ]
    }
}

فقط باید موارد زیر را با توجه به پروژه خود در کد بالا ویرایش کنید:

• Entry: نام RahkarinoPackage را به نام کامپوننت اصلی پروژه خود تغییر دهید.
• Output > filename: نام این بخش باید با نام main در فایل json یکی باشد.

نکته مهم: دقت کنید که مقدار libraryTarget باید برابر commonjs2 باشد وگرنه کار نخواهد کرد.

ایجاد فایل babelrc.

یک فایل بدون نام با فرمت .babelrc در روت پروژه خود ایجاد کرده و محتوای زیر را برای آن در نظر بگیرید:

{
    "presets": [
        "react",
        "env",
        "stage-0"
    ]
}

کار این فایل انجام تنظیمات babel برای کامپایل کدهای JSX/ES6 به JS5 می باشد. در تنظیمات وب پک نیز پلاگین babel-loader برای استفاده از کامپایلر babel تعریف شده است (در بخش module/ rules)

ایجاد فایل npmignore.

در روت پروژه خود یک فایل بی نام با فرمت npmignore ایجاد کنید و محتوای زیر را درون آن تعریف کنید:

src
demo
.babelrc
webpack.config.js

این فایل به npm cli می گوید که از کدام فایل ها و فولدرها بهنگام تولید پکیج npm صرف نظر کند.

تعریف کامپوننت ریکت:

ما برای این مقاله کامپوننت تستی زیر را تعریف کرده ایم اما شما می توانید کامپوننت دلخواه خود را تعریف کنید و از آن استفاده کنید.

در این کامپوننت سعی کردیم کاری فراتر از چاپ کردن یک hello world انجام دهیم!

شامل input textbox است و یک لیبل و مقداری دیتا که توسط props از کامپوننت های دیگر پاس داده می شوند.

سورس کد کامپوننت:

import React from 'react';
import PropTypes from 'prop-types';
const propTypes = {
    label: PropTypes.string.isRequired,
    onChange: PropTypes.func.isRequired,
    styles: PropTypes.object
}
const defaultProps = {
    styles: {
        label: {
            fontFamily: 'Comic Sans MS',
            color: 'green'
        },
        input: {
            background: '#ddd',
            border: '1px solid red'
        }
    }
}
class RahkarinoPackage extends React.Component {
    constructor(props) {
        super(props);
        this.handleChange = this.handleChange.bind(this);
    }
    handleChange(e) {
        this.props.onChange(e.target.value);
    }
    
    render() {
        const styles = this.props.styles || {};
        return (
            <div>
                <label style={styles.label}>{this.props.label}</label>
                <input type="text" style={styles.input} onChange={this.handleChange} />
            </div>
        );
    }
}
RahkarinoPackage.propTypes = propTypes;
RahkarinoPackage.defaultProps = defaultProps;
export default RahkarinoPackage;

بیلد گرفتن از کامپوننت ریکت:

دستور npm run build را اجرا کنید تا وب پک روی پروژه شما اجرا شود. پس از اجرای این دستور شما می توانید کامپوننت کامپایل شده خود را در فولدر lib پروژه مشاهده کنید. ساختار فایل ها و فولدرهای پروژه تا الان به شکل زیر است:

لاگین کردن به npm:

دستور npm login را اجرا کنید و username و password و email مربوط به اکانت کاربری خود در سایت npm را وارد کنید. مطابق تصویر زیر باید username و password و email خود را وارد کنید تا بتوانید وارد مرحله بعدی شوید و کامپوننت ریکتی خود را در سایت npmjs پابلیش کنید.

انتشار کامپوننت ریکت در کتابخانه npm:

دستور npm publish را در cmd اجرا کنید تا پکیج موردنظرتان در npm ایجاد شود. سپس با مراجعه به لینک زیر پکیج ایجاد شده خود را مشاهده کنید:

https://www.npmjs.com/package/ih-package

سپس برای اینکه اطلاعاتی درباره package خود مشاهده کنید دستور npm info [YOUR PACKAGE NAME] را در cmd اجرا کنید. بجای عبارت [YOUR PACKAGE NAME] باید نام پکیج را وارد کنید. در این مثال دستور npm info rahkarino-pkg را اجرا می کنیم و اطلاعات زیر را دریافت می کنیم:

در نهایت می توانید پکیج تولیدی این مقاله را در آدرس زیر مشاهده کنید:

https://www.npmjs.com/package/rahkarino-pkg

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

همچنین ما را در شبکه های اجتماعی با آیدی rahkarino دنبال کنید. سپاس!