بسته خودت را بساز!

ساخت پکیج برای npm با استفاده از React.js

چندماه قبل بود که برای مصاحبه یه شرکت آلمانی یه تستی رو باید انجام میدادم که عددی رو بگیره و معادل دلاری اون رو به حروف طبق فرمت خاصی نمایش بده، و البته الگوریتمش مشابه نمونه های زیادی که روی اینترنت هستن نباشه!

پروژه البته قرار بود تحت WCF باشه و یه کلاینت هم با WPF براشون ایجاد کنم، از نمونه ای که انجام داده بودم هم خوششون اومد اما قبل از اینکه به مراحل بعدی برسم، بخاطر کرونا کلا همه چیز معلق شد!

و در راستای این که جوان ایرانی چیزی که زیاد داره تهدید و فرصت سوخته(یا حداقل نیمه سوخته!) هست، تصمیم گرفتم همون کد رو با کمی تغییر تبدیلش کنم به یه پکیج و توی npm قرار بدم، و از اینکه ببینم هفته‌ای یا ماهی چقدر دانلود میشه و احتمالا کار کسی رو راه میندازه خوشحال بشم!

خلاصه چیزی که قراره بخونی

اگه خیلی حوضله خوندن متن رو نداری، یا اول دوست داری بدونی چیه بعدا بخونی یا اصلا جزییات برات مهم نیست خلاصه اینه:
من یه پکیج توی npm گذاشتم که اینجا خودش رو میشه دید و اینجا روی گیت هابم سورسش هست و با استفاده از ین دستور هم میتونی نصبش کنی و تو پروژه ات استفاده کنی:

npm i currency-to-words

اینجاش که آسونه!
برای ساخت پکیج به چیز چندان زیادی احتیاج ندارید، ما اینجا با استفاده از React کار رو جلو میبریم اما احتمالا توی فریمورک یا کتابخونه های جاوااسکریپتی دیگه هم چندان نباید متفاوت باشه.

مثل هر پروژه ریکتی دیگه با این دستور پروژه رو ایجاد می‌کنیم ( میتونید قبلش اینجا جستجو کنید که اسم تکراری انتخاب نکنید تا بعدا لازم نباشه اصلاحش کنید)

npx create-react-app currency-to-words

به بیشتر فایل هایی که ایجاد شده نیازی نداریم. پس با خیال راحت محتویات پوشه src و خود پوشه public و حتی app و index رو پاک کنید!
توی فولدر src کامپوننتی که لازم دارید رو مثل یه کامپوننت عادی ریکتی پیاده سازی کنید، فقط چند نکته ساده داره.
۱) طبیعتا بهتره که کامپوننت شما تا حد ممکن خودش به کامپوننت های دیگه وابسته نباشه
2) کامپوننت شما میتونه مثل من خروجی JSX نداشته باشه، و احتمالا اصلا به خود React‌ هم وابسته نباشه!
3) بیشتر معمول هست که کل بسته حداکثر توی یکی دوتا فایل پیاده سازی بشه، پس احتمالا لازم نیست n تا فولدر و فایل برای پیاده سازی یه کامپوننت ساده بسازید!
4) اکسپورت کردن چیزهایی که لازم دارید فراموشتون نشه!

وقتی پیاده سازی پروژه تموم شد. چندتا کار ساده هنوز مونده که انجام بدید.
اول بیرون از فولدر src یه فایل index.js (یا اگه از jsx استفاده کردید طبیعتا index.jsx) ایجاد کنید. این فایل فقط همین یک خط رو میتونه داشته باشه:

export * from './src/currencyToWords.jsx'

و کاربردش اینه که وقتی پکیج شما نصب شد، این میشه شروع دسترسی به پروژه کامپوننت شما.

بعد از اون فایل package.jon رو باز کنید و اگه وابستگی اضافه داره حذفش کنید. بعد این خطوط رو به اون اضافه کنید: ( اینجا نمونه فایل package.json من روی گیت هاب )

&quotname&quot: &quotcurrency-to-words&quot,
&quotversion&quot: &quot0.3.0&quot,
&quotdescription&quot: &quotConverting currency to words&quot,
&quotmain&quot: &quotsrc/currencyToWords.jsx&quot,
&quotkeywords&quot: [
&quotcurrency to words&quot,
&quotnumber to words currency&quot,
&quotcurrency&quot
],
&quotrepository&quot: {
&quottype&quot: &quotgit&quot,
&quoturl&quot: &quothttps://github.com/MyBitBird/currency-to-words&quot
},
&quotlicense&quot: &quotMIT&quot,
&quotprivate&quot: false,

تقریبا مشخصه که کجاها رو باید شما تغییر بدید و اصلاح کنید بر اساس پروژه خودتون، فقط تنها نکته اینه که فیلد version رو از 0.0.1 شروع بکنید و هربار که لازم شد مجددا بسته رو روی npm پابلیش کنید حتما باید ورژنش رو اصلاح کنید.

و آخرین مرحله ساده اینه که فایل README.md رو برای راهنمایی کاربرهاتون تغییرش بدید، چون همین فایل توی صفحه مربوط به پکیجتون نمایش داده میشه.

اینجاش کمتر آسونه!

باز بر میگردیم سراغ فایل package.json. من اینجا برای ساختن پروژه از webpack استفاده کردم. راه های دیگه هم وجود داره که اینکه چرا و کدوم راه مناسب تره رو دیگه اینجا بازش نمیکنیم.
برای اینکار لازمه اول بهش بگیم که ما قراره این کار رو انجام بدیم. پس این خط رو اضافه می کنیم: (اگه توی بخش اسکریپت پروژه شما به صورت پیش فرض چیزهای دیگه ای هست، میتونید حذفشون کنید)

&quotscripts&quot: {&quotbuild&quot: &quotwebpack&quot}

و بعد باید پکیج هایی که برای ساخت با webpack لازم داریم رو مشخص کنیم. این خطوط رو توی قسمت devDependencies اضافه می‌کنیم.( نسخه ای که من اینجا استفاده کردم از هر کدوم از این پکیج ها ممکنه زمانی که شما این رو میخونید عوض شده باشه اما احتمالا چندان مهم نیست برای این مرحله)

&quot@babel/core&quot: &quot^7.7.5&quot,
&quot@babel/preset-env&quot: &quot^7.7.6&quot,
&quot@babel/preset-react&quot: &quot^7.7.4&quot,
&quotbabel-loader&quot: &quot^8.0.6&quot,
&quotwebpack-cli&quot: &quot^3.3.11&quot,
&quotwebpack&quot: &quot^4.6.0&quot

تقریبا آخراشه!
یه فایل کنار همون index با این اسم ایجاد کنید:

webpack.config.js

که تنظیمات بیلد کردن پروژه رو اینجوری توش مشخص میکنیم:

var path = require('path');
module.exports = {
mode: 'production',
entry: './index.jsx',
output: {
path: path.resolve('build'),
filename: 'index.jsx',
libraryTarget: 'commonjs2'
},
module: {
rules: [
{
test: /\.js$/,
include: path.resolve(__dirname, 'src'),
exclude: /(node_modules|bower_components|build)/,
use: {
loader: 'babel-loader',
options: {
presets: ['env']
} } } ] },
externals: {
'react': 'commonjs react'
}}

مشخص میکنه که شروع کامپوننت با فایل index هست و خروجی رو باید توی فولدری به اسم build (که میتونید اسمش رو هم عوض کنید) قرار بده.

تموم شد!
توی کنسول اول npm install بزنید تا همه پکیج هایی که دستی اضافه کردید نصب بشن.
بعد از اون با زدن npm run build قاعدتا باید بدون خطا پروژه بیلد بشه.

اینجاش باحاله!

اگه تونستید بیلد بگیرید، برید توی npm یه اکانت ایجاد کنید.
بعد توی کنسول پروژه بزنید npm login و اطلاعات لاگین رو بدید، بعد npm publish و تمام!

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

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