اضافه کردن کتابخانه جاوااسکریپت به 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-parsernpm install typescript --save-devnpm 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خواندن مقاله در وب سایت من