اضافه کردن کتابخانه جاوااسکریپت به npm

در این پست یک پکیج جاوااسکریپت می سازیم و آنرا به npm اضافه میکنیم.

برای شروع ابتدا یک فولدر به نام fraction ایجاد میکنیم.

mkdir fraction
cd fraction

با دستور زیر این پروژه را یک پروژه npm تعریف میکنیم.

npm init -y # or use npm init

درون پوشه fraction یک فایل بنام package.json به وجود آمده است. که محتویات آنرا به صورت زیر تغییر میدهیم.

  {  &quotname&quot: &quot@abasb75/fraction&quot,
   &quotversion&quot: &quot0.0.1&quot,
   &quotdescription&quot: &quotfraction with equation-parse&quot,
  &quotmain&quot: &quotindex.js&quot,
 &quotscripts&quot: { 
         &quottest&quot: &quotecho \&quotError: no test specified\&quot && exit 1&quot  
  },&quotkeywords&quot:    &quotreact fraction&quot ,    &quotfraction&quot,     &quotfractions&quot,  &quotmath&quot       ],
   &quotauthor&quot: &quotAbbas Bagheri <abasbagheria@gmail.com>&quot,
  &quotlicense&quot: &quotISC&quot
}

ویژگی name نام کتابخانه مورد نظر ماست که من @abasb75/fraction در نظر گرفتم. دقت کنید این نام باید یکتا باشد و قبلا کسی آنرا در npm ثبت نکرده باشد.

ویژگی version نسخه کتابخانه را مشخص میکند. من برای شروع 0.0.1 در نظر گرفتم.

ویژگی description یک توضیح کوتاه یک جمله ای در مورد کتابخانه است.

ویژگی main آدرس اصلی فایل شروع برنامه است.

ویژگی keywords کلمات کلیدی کتابخانه که برای بهبود نمایش کتابخانه در جستجو میتوا از آن کمک گرفت

ویژگی author هم نام سازنده کتابخانه است.

پس از ایجاد پروژه npm ابتدا کتابخانه های مورد استفاده را به پروژه خود اضافه میکنیم.

ما قصد داریم در این پروژه از کتابخانه equation-parser استفاده کنیم.

npm install -S equation-parser

npm install typescript --save-dev

npm install @types/node --save-dev

اکنون باید لیست کتابخانه های مورد استفاده به فایل package.json اضافه شده باشد.

یک پوشه بنام src می سازیم.

mkdir src

در این پوشه فایلهای زیر را اضافه میکنیم.

fraction/
-- package.json
-- package-lock.json
-- src/
-- -- index.ts
-- -- src/
-- -- -- parse.ts
-- -- -- renderTree.ts
-- -- -- compute.ts
-- -- -- parsedFraction.ts

دقت کنید من یک پوشه بنام پوشه src در کنار فایل index.ts ایجاد کردم و هر دو را درون فولدر src که از قبل ایجاد کرده بودم قرار دادم.

فایل parsedFraction.ts :

import {EquationNode, EquationParserError} from 'equation-parser';  
export type ParsedFraction =  EquationNode | EquationParserError;

فایل parse.ts :

import {parse} from 'equation-parser';
import {ParsedFraction} from './parsedFraction';

export default function (term:string,error?:Function):ParsedFraction{
 const parsedFraction:ParsedFraction = parse(term);
if(parsedFraction.type==&quotparser-error&quot && error){
        error();
    }
    return parsedFraction;
}

فایل renderTree.ts :

import {parse,renderTree} from 'equation-parser';
import {ParsedFraction} from './parsedFraction';

export default function (term:string,error?:Function){
   const parsedFraction:ParsedFraction = parse(term);
   if(parsedFraction.type==&quotparser-error&quot && error){
       error();
  }
    return renderTree(parsedFraction);
}

فایل compute.ts :

import parse from './parse';
import {ParsedFraction} from './parsedFraction';

export default function (term:string,error?:Function):number{
   const parsedFraction:ParsedFraction = parse(term,error);
    if(parsedFraction.type !== &quotparser-error&quot){
        return result(parsedFraction,error ? error : ()=>{} );
    }else{
        return 0;
    }
}
      
function result(parsedFractions:ParsedFraction,error:Function):number{
    if(parsedFractions.type == &quotnumber&quot){
        return parseInt(parsedFractions.value);
    }else if(parsedFractions.type === &quotmultiply-dot&quot){
        return result(parsedFractions.a,error) * result(parsedFractions.b,error);
    }else if(parsedFractions.type === &quotdivide-fraction&quot){
        return result(parsedFractions.a,error) / result(parsedFractions.b,error);
    }else if(parsedFractions.type === &quotplus&quot){
        return result(parsedFractions.a,error) + result(parsedFractions.b,error);
    }else if(parsedFractions.type === &quotminus&quot){
        return result(parsedFractions.a,error) - result(parsedFractions.b,error);
    }else if(parsedFractions.type === &quotblock&quot){
        return result(parsedFractions.child,error);
    }else{
      error();
       return 0;
  }
}

فایل index.ts :

import compute from &quot./src/compute&quot
import renderTree from &quot./src/renderTree&quot
import parse from &quot./src/parse&quot
      
export {compute,renderTree,parse} ;

اگر در فولدر fraction فایل tsconfig.json وجود نداشت آنرا بوجود می آوریم و اگر هم موجود بود محتوای آنرا به زیر تغییر میدهیم.

فایل tsconfig.json :

 {
&quotcompilerOptions&quot: {
      &quotstrict&quot: true,
      &quotdeclaration&quot: true,
      &quotesModuleInterop&quot: true,
      &quotoutDir&quot: &quotdist&quot,
      &quottarget&quot: &quotes6&quot,
      &quotmodule&quot: &quotes6&quot,
      &quotmoduleResolution&quot: &quotnode&quot,
    },
    &quotinclude&quot: [&quotsrc&quot]
}

باید کدهای typescript خود را کامپایل کرده و خروجی جاوااسکریپت بگیریم. برای این کار دستور زیر را در ترمینال وارد میکنیم.

tsc

بعد از پایان کامپایل یک فولدر جدید به نام dist به پروژه ما اضافه شد.

مسیر dist را در فایل tsconfig.json مشخص کرده بودیم.

&quotoutDir&quot: &quotdist&quot,

فایل README.md یا راهنما را برای کتابخانه خود بسازید و به پروژه اضافه کنید.

اکنون پروژه خود را به گیتهاب اضافه کنید و آدرس آنرا به فایل package.json اضافه کنید.

&quotrepository&quot: {
    &quottype&quot: &quotgit&quot,
    &quoturl&quot: &quotgit+https://github.com/abasb75/fraction.git&quot
},
&quotbugs&quot: {
    &quoturl&quot: &quothttps://github.com/abasb75/fraction/issues&quot
},
&quothomepage&quot: &quothttps://github.com/abasb75/fraction#readme&quot,

فایلهای README.md و package.json را در فولدر dist کپی کنید

البته میتوان فرایند کامپایل و کپی فایلها را به صورت دستور به nodejs معرفی کرد. برای اینکار در مکینتاش و لینوکس کدهای زیر را به فایل package.json اضافه میکنیم:

&quotscripts&quot: {
    &quotclean&quot: &quotrm -rf dist&quot,
    &quotbuild&quot: &quotnpm run clean && tsc && cp package.json README.md ./dist&quot 
} 

فایل package.json ما در نهایت به این تبدیل شد :

{
   &quotname&quot: &quot@abasb75/fraction&quot,
    &quotversion&quot: &quot0.0.1&quot,
    &quotdescription&quot: &quotformula computer&quot,
    &quotmain&quot: &quotindex.js&quot,
    &quotscripts&quot: {
      &quottest&quot: &quotecho \&quotError: no test specified\&quot && exit 1&quot
    },
    &quotkeywords&quot: [
      &quotreact fraction&quot,
     &quotfraction&quot,
      &quotfractions&quot,
      &quotmath&quot,
      &quotcompute&quot,
      &quot&quot
    ],
  &quotauthor&quot: &quotAbbas Bagheri <abasbagheria@gmail.com>&quot,
  &quotlicense&quot: &quotISC&quot,
  &quotrepository&quot: {
    &quottype&quot: &quotgit&quot,
    &quoturl&quot: &quotgit+https://github.com/abasb75/fraction.git&quot
  },
  &quotdependencies&quot: {
    &quotequation-parser&quot: &quot^1.0.0&quot
  },
  &quotdevDependencies&quot: {
    &quot@types/node&quot: &quot^18.11.18&quot,
    &quot@types/react&quot: &quot^18.0.26&quot,
    &quottypescript&quot: &quot^4.9.4&quot
  }
} 

فایلهایی که تا الآن داریم:

fraction/
-- package.json
-- package-lock.json
-- .gitignore
-- src/
-- -- index.ts
-- -- src/
-- -- -- parse.ts
-- -- -- renderTree.ts
-- -- -- compute.ts
-- -- -- parsedFraction.ts
-- dist/
-- -- index.js
-- -- index.d.ts
-- -- package.json
-- -- README.md
-- -- src/
-- -- -- parse.js
- -- -- renderTree.js
-- -- -- compute.js
-- -- -- parsedFraction.js
-- -- -- parse.d.ts
-- -- -- renderTree.d.ts
-- -- -- compute.d.ts
-- -- -- parsedFraction.d.ts
-- node_modules/
-- -- *

فایل gitignore. را میسازیم و مواردی که نمیخواهیم در گیت آپلود شود به آن اضافه میکنیم:

node_modules

پروژه را در گیتهاب آپلود میکنیم:

برای انتشار پروژه در npm اگر در این سایت حساب نداریم به این سایت مراجعه میکنیم و حساب کاربری جدیدی میسازیم. سپس وارد ترمینال م شده و در npm لاگین میکنیم.

npm login
npm whoami

پس از وارد پوشه dist شده و دستور انتشار را وارد میکنیم.

cd dist
npm publish --access public

برای استقاده از این کتابخانه در سایر پروژه های جاوااسکریپتی فقط کافیست دستور زیر را وارد کنیم.

npm i @abasb75/fraction

آدرس پروژه در گیتهاب

آدرس پروژه در npmjs

خواندن مقاله در وب سایت من