Beliebte npm-Pakete. Band 1

Guten Tag, Freunde!



Ich präsentiere Ihnen eine Auswahl von zehn beliebten npm-Paketen mit Anwendungsbeispielen und alternativen Lösungen.



Es wird davon ausgegangen, dass Sie mit JavaScript und insbesondere mit Node.js sehr vertraut sind.



Dieser Teil enthält die folgenden Pakete:







Kreide



Wöchentliche Downloads: 58 Millionen.



Zweck: Formatieren von Nachrichten, die im Terminal angezeigt werden.



Anwendungsbeispiel.



Installieren Sie das Paket: Garn hinzufügen Kreide oder npm i Kreide.



Erstellen Sie die Datei 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}}
`);


Führen Sie das Skript aus: node chalk.js.







Alternative: Escape-Sequenzen:



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


Fortschritt



Wöchentliche Downloads: 13 Millionen.



Zweck: Fortschrittsanzeige "Terminal" (ASCII-Zeichen).



Anwendungsbeispiel.



Installieren Sie das Paket: Garn hinzufügen Fortschritt.



Erstellen Sie die Datei 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);


Führen Sie das Skript aus: node progress.js







Ein weiteres Beispiel:



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();


Minimist



Wöchentliche Downloads: 35 Millionen.



Zweck: Analysieren der über das Terminal übergebenen Argumente.



Anwendungsbeispiel.



Installieren Sie das Paket: Garn hinzufügen Minimist.



Erstellen Sie die Datei minimist.js:



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


Führen Sie das Skript aus: node script.js foo bar baz -x 1 -y2 --z = 3 -a







fs-extra



Wöchentliche Downloads: 32 Millionen.



Zweck: Zusätzliche Methoden für die Arbeit mit dem Dateisystem (Erweiterung fs).



Grundlegende Methoden:



  • Kopieren - Dateien kopieren
  • emptyDir - leeres Verzeichnis. Wenn das Verzeichnis nicht vorhanden ist, wird es erstellt
  • sureFile - Bestimmen Sie, ob eine Datei vorhanden ist. Wenn eine Anforderung zum Erstellen einer Datei in nicht vorhandenen Verzeichnissen gestellt wird, werden diese erstellt
  • sureDir ist für ein Verzeichnis identisch. Aliase - mkdirs, mkdirp
  • Verschieben - Verschiebt eine Datei oder ein Verzeichnis
  • outputFile - ähnlich wie fs.writeFile, außer dass bei Fehlen ein übergeordnetes Verzeichnis erstellt wird
  • outputJson - ähnlich wie fs.writeJson, außer dass bei Fehlen ein übergeordnetes Verzeichnis erstellt wird
  • readJson - Liest eine JSON-Datei und konvertiert sie in ein Objekt
  • Entfernen - Entfernen Sie eine Datei oder ein Verzeichnis
  • writeJson - Schreiben eines Objekts in eine JSON-Datei


Die angegebenen Methoden sind asynchron, es gibt ihre synchronen Gegenstücke (mit dem Präfix "Sync").



Methoden können mit Rückrufen, Versprechungen und Async / Warten verwendet werden. Ich werde Versprechen verwenden.



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



Wöchentliche Downloads: 36 Millionen.



Zweck: Generieren Sie eine eindeutige Kennung.



Anwendungsbeispiel.



Erstellen wir einen Server mit Express, der auf Anforderung des Clients eine ID zurückgibt.



Installieren Sie uuid, express und cors: Garn fügen Sie uuid express cors hinzu.



Erstellen Sie eine uuid.js-Datei:



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"));


Wir starten den Server: Knoten uuid.js.



Erstellen Sie die Datei 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>


Öffnen Sie index.html in einem Browser.







Alternativ können Sie in einfachen Anwendungen die Date.now () -Methode verwenden, die die Anzahl der Millisekunden seit dem 1. Januar 1970 zurückgibt:



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

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


Moment



Wöchentliche Downloads: 14 Millionen.



Zweck: Formatierung von Datum und Uhrzeit.



Anwendungsbeispiel.



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


Alternative: Date- und Intl.DateTimeFormat-Konstruktoren.



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


Moment ist derzeit eingestellt.



Axios



Wöchentliche Downloads: 12 Millionen.



Zweck: Senden von HTTP-Anforderungen. Funktioniert sowohl in Node.js als auch im Browser.



Anwendungsbeispiel.



Installieren Sie das Paket: Garn hinzufügen Axios.



Erstellen Sie die Datei 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);
	}
})();


Führen Sie die Datei aus: node axios.js.







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


Implementierung einer GET-Anfrage in "pure" 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);
	});


Im Browser können Sie die Fetch-API verwenden:



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


Im Internet finden Sie eine Erwähnung eines anderen Pakets zum Senden von HTTP-Anforderungen - die Anforderung ist jedoch derzeit veraltet.



asynchron



Wöchentliche Downloads: 31 Millionen.



Zweck: Dienstprogramm zum Arbeiten mit asynchronem Code. Funktioniert sowohl in Node.js als auch im Browser.



Anwendungsbeispiel.



Installieren Sie das Paket: Garn hinzufügen asynchron.



Erstellen Sie 3 Dateien (Name -> Inhalt): file1.txt -> foo, file2.txt -> bar, file3.txt -> baz qux.



Erstellen Sie die Datei 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


dotenv



Wöchentliche Downloads:



12M Zweck: Laden Sie Umgebungsvariablen aus der Datei ".env" in process.env.



Anwendungsbeispiel.



Simulieren wir eine Verbindung zur MongoDB Cloud.



Installieren Sie das Paket: Garn hinzufügen dotenv.



Erstellen Sie eine ".env" -Datei:



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


Erstellen Sie eine Datei "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,
});


Alternativ können Sie config verwenden .



Installieren Sie das Paket: yarn add config.



Erstellen Sie die Datei config.json:



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


Erstellen Sie die Datei 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"));


Validator



Wöchentliche Downloads: 4 Millionen.



Zweck: Eine Bibliothek zur Validierung und Neutralisierung von Daten, die als Zeichenfolgen übertragen wurden.



Anwendungsbeispiel.



Lassen Sie uns die Formularübermittlung und Datenüberprüfung auf dem Server implementieren.



Installieren Sie das Paket: Garn hinzufügen Validator.



Erstellen Sie die Datei 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>


Erstellen Sie die Datei 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"));


Wir starten den Server: node validator.js.



Öffnen Sie index.html und senden Sie Daten.











Wir erhalten eine Nachricht, dass die E-Mail-Adresse und die Kreditkartennummer ungültig sind.



Ändern Sie die E-Mail- und Kartenwerte in myemail@example.com bzw. 2222111111111111.



Klicken Sie auf "Senden".











Wir erhalten eine Nachricht über die erfolgreiche Datenvalidierung.



Das ist alles für heute. Hoffe du hast etwas hilfreiches gefunden. Danke für die Aufmerksamkeit.



All Articles