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

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

mkdir fraction cd fraction

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

npm init -y # or use npm init

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

{
    "name": "@abasb75/fraction",
    "version": "0.0.1",
    "description": "fraction with equation-parse",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [
    "react fraction" ,
        "fraction",
        "fractions",
        "math"
    ],
    "author": "Abbas Bagheri ",
    "license": "ISC"
}

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=="parser-error" && 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=="parser-error" && 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 !== "parser-error"){
        return result(parsedFraction,error ? error : ()=>{} );
    }else{
        return 0;
    }
}
    
function result(parsedFractions:ParsedFraction,error:Function):number{
    if(parsedFractions.type == "number"){
        return parseInt(parsedFractions.value);
    }else if(parsedFractions.type === "multiply-dot"){
        return result(parsedFractions.a,error) * result(parsedFractions.b,error);
    }else if(parsedFractions.type === "divide-fraction"){
        return result(parsedFractions.a,error) / result(parsedFractions.b,error);
    }else if(parsedFractions.type === "plus"){
        return result(parsedFractions.a,error) + result(parsedFractions.b,error);
    }else if(parsedFractions.type === "minus"){
        return result(parsedFractions.a,error) - result(parsedFractions.b,error);
    }else if(parsedFractions.type === "block"){
        return result(parsedFractions.child,error);
    }else{
        error();
        return 0;
    }
}

فایل index.ts :

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

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

فایل tsconfig.json :

{
    "compilerOptions": {
        "strict": true,
        "declaration": true,
        "esModuleInterop": true,
        "outDir": "dist",
        "target": "es6",
        "module": "es6",
        "moduleResolution": "node",
    },
    "include": ["src"]
}

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

tsc

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

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

"outDir": "dist",

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

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

"repository": {
    "type": "git",
    "url": "git+https://github.com/abasb75/fraction.git"
},
"bugs": {
    "url": "https://github.com/abasb75/fraction/issues"
},
"homepage": "https://github.com/abasb75/fraction#readme",

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

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

"scripts": {
    "clean": "rm -rf dist",
    "build": "npm run clean && tsc && cp package.json README.md ./dist" 
} 

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

{
    "name": "@abasb75/fraction",
    "version": "0.0.1",
    "description": "formula computer",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1"
    },
    "keywords": [
        "react fraction",
        "fraction",
        "fractions",
        "math",
        "compute"
    ],
    "author": "Abbas Bagheri ",
    "license": "ISC",
    "repository": {
        "type": "git",
        "url": "git+https://github.com/abasb75/fraction.git"
    },
    "dependencies": {
        "equation-parser": "^1.0.0"
    },
    "devDependencies": {
        "@types/node": "^18.11.18",
        "@types/react": "^18.0.26",
        "typescript": "^4.9.4"
    }
}       

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

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