Clever Geek Handbook

حزم npm الشعبية. المجلد 1

يوم جيد ، أيها الأصدقاء!



أقدم انتباهكم إلى مجموعة مختارة من عشر حزم npm شائعة مع أمثلة على استخدامها والحلول البديلة.



يفترض أنك معتاد جدًا على JavaScript وعلى وجه الخصوص Node.js.



يقدم هذا الجزء الحزم التالية:







الطباشير



التنزيلات الأسبوعية: 58 مليونًا



الغرض: تنسيق الرسائل المعروضة في المحطة.



مثال على الاستخدام.



تثبيت الحزمة: الغزل إضافة الطباشير أو npm أنا الطباشير.



قم بإنشاء ملف chalk.js: 



const chalk = require("chalk");
const log = console.log;

log(
	chalk.red("  \n") +
	chalk.green("  \n") +
	chalk.blue("  ")
);

//  
const os = require("os");

log(`
	Total memory: ${chalk.blue(os.totalmem())} bytes
	Free memory: ${chalk.green(os.freemem())} bytes
	Memory used: ${chalk.red(os.totalmem() - os.freemem())} bytes
`);

//   
const v8 = require("v8");

const {
	total_heap_size: total,
	used_heap_size: used,
	heap_size_limit: limit,
} = v8.getHeapStatistics();

log(chalk`
	Heap Size Limit: {rgb(0, 0, 255) ${limit}}
	Total Heap Size: {hex('#008000') ${total}}
	Used Heap Size: {red ${used}}
`);


قم بتشغيل البرنامج النصي: node chalk.js.







بديل: تسلسلات الهروب: 



console.log(
	"[31m%s[0m[32m%s[0m[34m%s[0m",
	"  \n",
	"  \n",
	"  "
);


التقدم



التنزيلات الأسبوعية: 13



مليون.الغرض: مؤشر التقدم "النهائي" (أحرف ASCII).



مثال على الاستخدام.



تثبيت الحزمة: الغزل إضافة التقدم.



إنشاء ملف progress.js: 



const ProgressBar = require("progress");

const bar = new ProgressBar(":bar", { total: 10 });
const timer = setInterval(() => {
	bar.tick();
	if (bar.complete) {
		console.log("\n");
		clearInterval(timer);
	}
}, 200);


قم بتشغيل البرنامج النصي: node progress.js







مثال آخر: 



const ProgressBar = require("progress");
const https = require("https");

const req = https.request({
	host: "example.com",
	port: 443,
	path: "/filename.ext",
});

req.on("response", (res) => {
	const len = parseInt(res.headers["content-length"], 10);

	console.log();

	const bar = new ProgressBar(
		"   [:bar] :rate/bps :percent :etas",
		{
			complete: "=",
			incomplete: " ",
			width: 20,
			total: len,
		}
	);

	res.on("data", (chunk) => {
		bar.tick(chunk.length);
	});

	res.on("end", () => {
		console.log("\n");
	});
});

req.end();


الحد الأدنى



التنزيلات الأسبوعية: 35



مليون.الغرض: تحليل الحجج التي تم تمريرها عبر الجهاز.



مثال على الاستخدام.



قم بتثبيت الحزمة: أضف الغزل الحد الأدنى.



قم بإنشاء ملف minimist.js: 



const args = require("minimist")(process.argv.slice(2));
console.log(args);
console.log(args._);
console.log(args.a);


قم بتشغيل البرنامج النصي: node script.js foo bar baz -x 1 -y2 --z = 3 -a







fs- اضافية



التنزيلات الأسبوعية: 32



مليون.الغرض: طرق إضافية للعمل مع نظام الملفات (التمديد fs).



الطرق الأساسية:



  • نسخ - نسخ الملفات
  • فارغ دير - تنظيف الدليل. إذا كان الدليل غير موجود ، يتم إنشاؤه
  • ضمان الملف - تحديد ما إذا كان الملف موجودًا. إذا تم تقديم طلب لإنشاء ملف في دلائل غير موجودة ، فسيتم إنشاؤها
  • warrantyDir هو نفسه بالنسبة للدليل. الأسماء المستعارة - mkdirs ، mkdirp
  • نقل - نقل ملف أو دليل
  • ملف الإخراج - مشابه لملف fs.writeFile ، باستثناء أنه إذا كان مفقودًا ، يتم إنشاء دليل رئيسي
  • outputJson - على غرار fs.writeJson ، باستثناء أنه إذا كان مفقودًا ، يتم إنشاء دليل رئيسي
  • readJson - اقرأ ملف JSON وقم بتحويله إلى كائن
  • إزالة - إزالة ملف أو دليل
  • writeJson - كتابة كائن إلى ملف JSON


الطرق المعطاة غير متزامنة ، وهناك نظائرها المتزامنة (مع بادئة "Sync").



يمكن استخدام الأساليب مع عمليات الاسترجاعات والوعود وعدم التزامن / انتظار. سأستخدم الوعود. 



const fs = require("fs-extra");

// copy
fs.copy("/old-file", "/dir/new-file")
	.then(() => {
		console.log("!");
	})
	.catch((err) => {
		console.error(err);
	});

// emptyDir
fs.emptyDir("/some/empty/dir")
	.then(() => {
		console.log("!");
	})
	.catch((err) => {
		console.error(err);
	});

// ensureFile
const file = "/this/path/does/not/exist/file.txt";

fs.ensureFile(file)
	.then(() => {
		console.log("!");
	})
	.catch((err) => {
		console.error(err);
	});

// move
const src = "/dir/file.txt";
const dest = "/dir/this/path/does/not/exist/file.txt";

fs.move(src, dest)
	.then(() => {
		console.log("!");
	})
	.catch((err) => {
		console.error(err);
	});

// outputFile
const file = "/this/path/does/not/exist/file.txt";
fs.outputFile(file, "!")
	.then(() => fs.readFile(file, "utf8"))
	.then((data) => {
		console.log(data); // => !
	})
	.catch((err) => {
		console.error(err);
	});

// readJson
fs.readJson("/data.json")
	.then((obj) => {
		console.log(obj.someKey); // => some value
	})
	.catch((err) => {
		console.error(err);
	});

// remove
fs.remove("/dir/file")
	.then(() => {
		console.log("!");
	})
	.catch((err) => {
		console.error(err);
	});

// writeJson
fs.writeJson("/data.json", { someKey: "some value" })
	.then(() => {
		console.log("!");
	})
	.catch((err) => {
		console.error(err);
	});


uuid



التنزيلات الأسبوعية: 36 مليون.



الغرض: إنشاء معرف فريد.



مثال على الاستخدام.



لنقم بإنشاء خادم باستخدام التعبير السريع الذي يُرجع المعرّف عند طلب العميل.



قم بتثبيت uuid و express و cors: إضافة خيوط uuid express.



قم بإنشاء ملف uuid.js: 



const express = require("express");
const cors = require("cors");

const { v4: uuidv4 } = require("uuid");

const app = express();
app.use(cors());

app.use("/getId", (_, res) => {
	//  
	const id = uuidv4();
	//   
	res.json(id);
});

app.listen(process.env.PORT || 3000, () => console.log("server ready"));


نبدأ الخادم: node uuid.js.



قم بإنشاء ملف index.html: 



<body>
	<input type="text" />
	<button>add</button>
	<ul></ul>

	<script>
		const button = document.querySelector("button");
		const input = document.querySelector("input");
		const list = document.querySelector("ul");

		button.addEventListener("click", async () => {
			//  
			const res = await fetch("http://localhost:3000/getId");
			const id = await res.json();

			const value = input.value;

			if (value.trim() !== "") {
				list.insertAdjacentHTML(
					"beforeend",
					//  
					`<li data-id=${id}>${value}</li>`
				);
			}
		});

		input.value = ", , ...";
		button.click();
	</script>
</body>


افتح index.html في المتصفح.







بدلاً من ذلك ، في التطبيقات البسيطة ، يمكنك استخدام طريقة Date.now () ، والتي تُرجع عدد المللي ثانية منذ 1 يناير 1970: 



const id1 = Date.now();
console.log(id1); // 1601905165758
console.log(typeof id1); // number

const id2 = Date.now().toString().slice(-4);
console.log(id2); // 5758


لحظة



التنزيلات الأسبوعية: 14M



الغرض: تنسيق التاريخ والوقت.



مثال على الاستخدام. 



const moment = require("moment");

console.log(
	`
		${moment().format()}
		${moment().format("DD.MM.YYYY H:m")}
	`
);
/*
	2020-10-05T19:16:38+05:00
	05.10.2020 19:16
*/

moment.locale("ru");

console.log(moment().format("dddd, Do MMMM Y"));
// , 5-  2020


بديل: مُنشئ Date و Intl.DateTimeFormat. 



const date = new Date();

const options = {
	day: "numeric",
	month: "long",
	year: "numeric",
};

console.log(date.toLocaleString("ru", options));
// 5  2020 .

options.weekday = "long";
options.hour = "numeric";
options.minute = "numeric";

console.log(
	new Intl.DateTimeFormat("ru", options).format(date)
); // , 5  2020 ., 19:42


لحظة متوقفة حاليا.



أكسيوس



التنزيلات الأسبوعية: 12



مليون.الغرض: إرسال طلبات HTTP. يعمل في كل من Node.js والمتصفح.



مثال على الاستخدام.



تثبيت الحزمة: الغزل إضافة أكسيوس.



قم بإنشاء ملف axios.js: 



// GET
const axios = require("axios");

(async () => {
	try {
		const res = await axios.get(
			"https://jsonplaceholder.typicode.com/users"
		);
		console.table(res.data);
	} catch (er) {
		console.error(er);
	}
})();


قم بتشغيل الملف: node axios.js. 







// POST
axios
	.post("/user", {
		firstName: "Harry",
		lastName: "Heman",
	})
	.then((res) => {
		console.log(res);
	})
	.catch((er) => {
		console.error(er);
	});


تنفيذ طلب GET في Node.js "خالص": 



const https = require("https");

https
	.get("https://jsonplaceholder.typicode.com/users", (res) => {
		let data = "";

		res.on("data", (chunk) => {
			data += chunk;
		});

		res.on("end", () => {
			console.table(JSON.parse(data));
		});
	})
	.on("error", (er) => {
		console.error(er.message);
	});


في المتصفح ، يمكنك استخدام Fetch API: 



;(async () => {
	await fetch("http://example.com/user", {
		method: "POST",
		mode: "no-cors",
		body: JSON.stringify({
			firstName: "Harry",
			lastName: "Heman",
		}),
	});
})();


على الويب ، يمكنك العثور على إشارة لحزمة أخرى لإرسال طلبات HTTP - طلب ، لكنها مهملة حاليًا.



غير متزامن



التنزيلات الأسبوعية: 31 مليونًا



الغرض: فائدة للعمل مع التعليمات البرمجية غير المتزامنة. يعمل في كل من Node.js والمتصفح.



مثال على الاستخدام.



تثبيت الحزمة: الغزل إضافة غير متزامن.



أنشئ 3 ملفات (الاسم -> المحتوى): file1.txt -> foo ، file2.txt -> bar ، file3.txt -> baz qux.



قم بإنشاء ملف async.js: 



const async = require("async");
const fs = require("fs");

const ext = "txt";
const file = (name) => `${__dirname}/${name}.${ext}`;

//   
async.map(
	[file("file1"), file("file2"), file("file3")],
	fs.stat,
	(er, results) => {
		if (er) console.error(er);

		console.log(results.map((item) => item.size));
	}
); // [ 3, 3, 7 ]

//   
async.map(
	[file("file1"), file("file2"), file("file3")],
	fs.readFile,
	(er, results) => {
		if (er) console.error(er);

		console.log(results.map((item) => item.toString()));
	}
); // [ 'foo', 'bar', 'baz qux' ]

//    
const timer1 = () => setTimeout(() => console.log("foo"), 300);
const timer2 = () => setTimeout(() => console.log("bar"), 100);
const timer3 = () => setTimeout(() => console.log("baz"), 200);
const asyncFuntions = [timer1, timer2, timer3];

async.parallel(asyncFuntions, (er, res) => {
	console.log(res);
}); // bar baz foo

//    
async.series(asyncFuntions, (_, res) => console.log(res));
// foo

//    
const add1 = (n, cb) => setTimeout(() => cb(null, n + 1), 100);
const sub2 = (n, cb) => setTimeout(() => cb(null, n - 2), 200);
const mult3 = (n, cb) => setTimeout(() => cb(null, n * 3), 300);

const composed = async.compose(add1, sub2, mult3);
// mult3 -> sub2 -> add1
composed(4, (_, res) => console.log(res)); // 11


دوتنف



التنزيلات الأسبوعية:



12 مليون الغرض: تحميل متغيرات البيئة من ملف "env" إلى process.env.



مثال على الاستخدام.



لنحاكي الاتصال بسحابة MongoDB.



تثبيت الحزمة: الغزل إضافة dotenv.



قم بإنشاء ملف "env.": 



// <usename>, <password>  <dbname>  
MONGODB=mongodb+srv://<username>:<password>@cluster0.p7jbn.mongodb.net/<dbname>?retryWrites=true&w=majority


قم بإنشاء ملف "dotenv.js": 



//  dotenv
require("dotenv/config");

//  mongoose
const mongoose = require("mongoose");

// process.env.MONGODB -   "MONGODB"   ".env"
mongoose.connect(process.env.MONGODB, {
	useNewUrlParser: true,
	useUnifiedTopology: true,
});


بدلاً من ذلك ، يمكنك استخدام config .



قم بتثبيت الحزمة: yarn add config.



قم بإنشاء ملف config.json: 



{
	"mongoDB": "mongodb+srv://<username>:<password>@cluster0.p7jbn.mongodb.net/<dbname>?retryWrites=true&w=majority"
}


قم بإنشاء ملف config.js: 



//  config
const config = require("config");

//  mongoose
const mongoose = require("mongoose");

// config.get("mongoDB") -    "mongoDB"  "config"   "config.json"
mongoose.connect(config.get("mongoDB"), {
	useNewUrlParser: true,
	useUnifiedTopology: true,
}, () => console.log("Connected to database"));


المدقق



عدد التنزيلات الأسبوعية: 4 ملايين.



الغرض: مكتبة للتحقق من البيانات المنقولة كسلاسل وتحييدها.



مثال على الاستخدام.



دعنا ننفذ إرسال النموذج والتحقق من صحة البيانات على الخادم.



تثبيت الحزمة: إضافة مصدق الغزل الغزل.



قم بإنشاء ملف index.html: 



<head>
	<title>Form Validation</title>
	<style>
		label,
		span {
			display: block;
			margin: .5rem;
		}
	</style>
</head>
<body>
	<form>
		<label>Name: <input type="text" value="Igor" data-name="name" /></label>
		<label>Age: <input type="number" value="30" data-name="age" /></label>
		<label
			>Email:
			<input type="email" value="myemail.example.com" data-name="email"
		/></label>
		<label
			>Site: <input type="url" value="myblog.org" data-name="url"
		/></label>
		<label
			>Card: <input type="text" value="1111222233334444" data-name="card"
		/></label>
		<button>Send</button>
		<p></p>
	</form>

	<script>
		const form = document.querySelector("form");
		//    
		const btn = form.querySelector("button");
		//    
		const log = form.querySelector("p");

		//       
		const getValue = (name) =>
			form.querySelector(`[data-name=${name}]`).value;

		btn.addEventListener("click", (e) => {
			e.preventDefault();

			//    
			const data = {
				name: getValue("name"),
				age: getValue("age"),
				email: getValue("email"),
				url: getValue("url"),
				card: getValue("card"),
			};

			//   
			const sendData = async (url) => {
				const req = await fetch(url, {
					method: "POST",
					headers: {
						"Content-Type": "application/json",
					},
					body: JSON.stringify(data),
				});

				//      
				const res = await req.json();

				console.log(res);

				//    
				if (res.length !== 0) {
					let html = "";
					for (const msg of res) {
						html += `<span>${msg}</span>`;
						log.innerHTML = html;
					}
				} else {
						log.textContent = 'Success'
					}
			};

			sendData("http://localhost:3000/users");
		});
	</script>


أنشئ ملف validator.js: 



const express = require("express");
const cors = require("cors");

//  ,   
// escape -   
const {
	isAlpha,
	isNumeric,
	isEmail,
	isURL,
	isCreditCard,
	escape,
} = require("validator");

//    
const validators = [isAlpha, isNumeric, isEmail, isURL, isCreditCard];

const app = express();
app.use(cors());
app.use(express.json());

//   
app.use("/users", (req, res) => {
	//   
	const data = ({ name, age, email, url, card } = req.body);

	console.log(data);

	//   
	const errors = [];

	//  
	for (let i = 0; i < validators.length; i++) {
		//  
		escape(Object.values(data)[i]);

		//     
		//       
		if (!validators[i](Object.values(data)[i])) {
			errors.push(`Wrong ${Object.keys(data)[i]}`);
		}
	}

	console.log(errors);

	//   
	res.json(errors);
});

app.listen(process.env.PORT || 3000, () => console.log("Server ready"));


نبدأ الخادم: node validator.js.



افتح index.html وأرسل البيانات.











نتلقى رسالة تفيد بأن عنوان البريد الإلكتروني ورقم بطاقة الائتمان غير صالحين.



دعنا نغير قيم البريد الإلكتروني والبطاقة إلى myemail@example.com و 2222111111111111 ، على التوالي.



انقر فوق "إرسال".











نتلقى رسالة حول التحقق من صحة البيانات بنجاح.



هذا كل شيء لهذا اليوم. أتمنى أن تكون قد وجدت شيئًا مفيدًا. شكرآ لك على أهتمامك.


More articles:


All Articles