Paket npm populer. Jilid 1

Selamat siang teman!



Saya menyajikan kepada Anda pilihan sepuluh paket npm populer dengan contoh penggunaannya dan solusi alternatif.



Ini mengasumsikan bahwa Anda sangat akrab dengan JavaScript dan khususnya Node.js.



Bagian ini menyajikan paket-paket berikut:







kapur



Unduhan mingguan: 58 juta



Tujuan: memformat pesan yang ditampilkan di terminal.



Contoh penggunaan.



Pasang paket: benang tambahkan kapur atau kapur npm i.



Buat file 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}}
`);


Jalankan skrip: node chalk.js.







Alternatif: escape sequence:



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


kemajuan



Unduhan mingguan: 13 juta



Tujuan: indikator kemajuan "terminal" (karakter ASCII).



Contoh penggunaan.



Instal paket: benang menambahkan kemajuan.



Buat file 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);


Jalankan script: node progress.js







Satu contoh lagi:



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



Unduhan mingguan: 35 juta



Tujuan: mengurai argumen yang melewati terminal.



Contoh penggunaan.



Pasang paket: benang tambahkan minimist.



Buat file minimist.js:



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


Jalankan skrip: node script.js foo bar baz -x 1 -y2 --z = 3 -a







fs-ekstra



Unduhan mingguan: 32 juta



Tujuan: metode tambahan untuk bekerja dengan sistem file (ekstensi fs).



Metode dasar:



  • salin - salin file
  • emptyDir - bersihkan direktori. Jika direktori tidak ada, itu dibuat
  • memastikanFile - Menentukan apakah file ada. Jika permintaan dibuat untuk membuat file di direktori yang tidak ada, itu dibuat
  • memastikanDir sama untuk direktori. Alias ​​- mkdirs, mkdirp
  • pindah - memindahkan file atau direktori
  • outputFile - mirip dengan fs.writeFile, kecuali jika hilang, direktori induk akan dibuat
  • outputJson - mirip dengan fs.writeJson, kecuali jika tidak ada, direktori induk akan dibuat
  • readJson - membaca file JSON dan mengubahnya menjadi sebuah objek
  • hapus - menghapus file atau direktori
  • writeJson - menulis objek ke file JSON


Metode yang diberikan adalah asinkron, ada pasangan sinkronnya (dengan awalan "Sinkronisasi").



Metode dapat digunakan dengan callback, promise, dan async / await. Saya akan menggunakan janji.



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



Unduhan mingguan: 36 juta



Tujuan: untuk menghasilkan pengenal unik.



Contoh penggunaan.



Mari buat server menggunakan express yang mengembalikan ID saat diminta oleh klien.



Pasang kors uuid, ekspres dan kors: benang tambahkan kors ekspres uuid.



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


Kami memulai server: node uuid.js.



Buat file 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>


Buka index.html di browser.







Alternatifnya, dalam aplikasi sederhana, Anda bisa menggunakan metode Date.now (), yang mengembalikan jumlah milidetik sejak 1 Januari 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


saat



Unduhan Mingguan: 14 juta



Tujuan: Format tanggal dan waktu.



Contoh penggunaan.



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


Alternatif: konstruktor Date dan 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


Momen saat ini dihentikan.



axios



Unduhan mingguan: 12 juta.



Tujuan: Mengirim permintaan HTTP. Berfungsi di Node.js dan browser.



Contoh penggunaan.



Pasang paket: benang tambahkan aksios.



Buat file 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);
	}
})();


Jalankan file: node axios.js.







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


Penerapan permintaan GET di Node.js "murni":



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


Di browser, Anda dapat menggunakan Fetch API:



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


Di web, Anda dapat menemukan sebutan paket lain untuk mengirim permintaan HTTP - permintaan, tetapi saat ini sudah tidak digunakan lagi.



async



Unduhan mingguan: 31 juta



Tujuan: utilitas untuk bekerja dengan kode asinkron. Berfungsi di Node.js dan browser.



Contoh penggunaan.



Instal paket: benang tambahkan asinkron.



Buat 3 file (nama -> konten): file1.txt -> foo, file2.txt -> bar, file3.txt -> baz qux.



Buat file 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



Unduhan Mingguan:



12M Tujuan: Memuat variabel lingkungan dari file ".env" ke dalam process.env.



Contoh penggunaan.



Mari simulasikan koneksi ke MongoDB Cloud.



Pasang paket: benang tambahkan dotenv.



Buat file ".env":



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


Buat file "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,
});


Alternatifnya, Anda dapat menggunakan config .



Instal paket: benang tambahkan konfigurasi.



Buat file config.json:



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


Buat file 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



Unduhan mingguan: 4 juta



Tujuan: perpustakaan untuk validasi dan netralisasi data yang dikirimkan sebagai string.



Contoh penggunaan.



Mari terapkan pengiriman formulir dan validasi data di server.



Instal paket: benang menambahkan validator.



Buat file 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>


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


Kami memulai server: node validator.js.



Buka index.html dan kirim data.











Kami menerima pesan bahwa alamat email dan nomor kartu kredit tidak valid.



Mari kita ubah nilai email dan kartu menjadi myemail@example.com dan 2222111111111111.



Klik "Kirim".











Kami menerima pesan tentang validasi data yang berhasil.



Sekian untuk hari ini. Semoga Anda menemukan sesuatu yang bermanfaat. Terima kasih atas perhatian Anda.



All Articles