大家好，我是Echa。
在我们繁忙的日程和紧迫的项目期限内，选择能够提高工作效率的工具，就显得至关重要。那作为程序员开发包管理工具那是必不可少的。
小编记得2020年3月17日，Github宣布收购npm，GitHub现在已经保证npm将永远免费。
今天我们聊聊NPM。若Node.js没有NPM，会怎样呢？
小编一句话概括：npm 之于 Node.js ，就像 pip 之于 Python， gem 之于 Ruby， pear 之于 PHP ，JDK 之于 Java。
由于内容有点多，现代流行的 npm包大全 分上下两篇
全文大纲
- NPM介绍
- 前端框架npm 集合
- 样式框架npm 集合
- 后端框架npm 集合
- CORS和请求 npm 集合
- API 服务 npm 集合
- Web sockets npm 集合
- 记录器npm集合
- 数据库工具npm集合
- 安全认证工具npm集合
- 配置模块npm集合
- 静态网站生成器npm集合
- 模板语言npm集合
- 图像处理npm集合
- 日期格式npm集合
- 数据生成器npm集合
- 验证者npm集合
- 表格和电子邮件npm集合
- 测试工具npm集合
- 网页抓取和自动化npm集合
- Linters 和格式化程序npm集合
- 模块打包器和最小化器npm集合
- 流程管理器和运行器npm集合
- CLI 和调试器npm集合
- 实用程序npm集合
- 系统模块npm集合
- 其他npm集合
NPM
官网地址：http://www.npmjs.com
Gihub：https://github.com/npm/npm
NPM 是 Node.js 的包管理工具（ Node package manager）。能解决NodeJS代码部署上的很多问题。常见的使用场景有以下几种：
- 允许用户从NPM服务器下载别人编写的第三方包到本地使用。
- 允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。
- 允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
NPM为开发者们打开了整个JavaScript的世界。它是世界上最大的软件注册机构，每周下载量约为30亿次。该注册表包含600,000多个包（构建代码块）。
如下图：
前端框架npm 集合
- React
npm 地址：
https://www.npmjs.com/package/react
React 使用虚拟 DOM 将页面的各个部分作为单独的组件进行管理，允许我们在不刷新整个页面的情况下刷新组件。通常与 React-dom 和 React-router-dom 一起使用。
安装
npm i react案例
import { useState } from 'react';
import { createRoot } from 'react-dom/client';
function Counter() {
const [count, setCount] = useState(0);
return (
<>
{count}
);
}
const root = createRoot(document.getElementById('root'));
root.render(如下图：
- Vue
npm 地址：
https://www.npmjs.com/package/vue
Vue 专注于使编写 Web 应用程序更快、更容易、更愉快的特性。它有很棒的文档。通常与 Vue-router 和 Vuex 一起使用。
安装
npm i vue如下图：
- Svelte
npm 地址：
https://www.npmjs.com/package/svelte
Svelte 是一种构建 Web 应用程序的新方法。它是一个编译器，它获取你的声明性组件并将它们转换为高效的 JavaScript，从而通过手术方式更新 DOM。
其他值得注意的框架包括 Angular、Ember、Backbone、Preact 等。你可以用它们中的任何一个来创造奇迹，黄金法则是提前学习现代 JS（ES6 及更高版本）。
安装
npm i svelte如下图：
样式框架npm 集合
- Bootstrap
npm 地址：
https://www.npmjs.com/package/bootstrap
世界上最流行的UI框架，用于构建响应式、移动优先的网站。直观且功能强大，但体积相对较大。许多现代 UI 工具包都基于它，例如 React Bootstrap 或 Reactstrap。
安装
npm i bootstrap如下图：
- Tailwind
npm 地址：
https://www.npmjs.com/package/tailwindcss
用于快速 UI 开发的低级、实用程序优先的 CSS 框架。从头开始构建，可定制。
安装
npm i tailwindcss如下图：
- Styled-components
npm 地址：
https://www.npmjs.com/package/styled-components
CSS-in-JS 工具，弥合了组件和样式之间的差距，提供了许多功能，让我们以功能性和可重用的方式启动和运行样式化组件。
其他出色的解决方案包括 Foundation、Bulma、Materialize 和 Ant Design。如果喜欢写 Vanilla CSS，我们可以使用一些 CSS 扩展语言，比如 SASS，来扩展它的特性。
安装
npm i styled-components如下图：
后端框架npm 集合
- Express
npm 地址：
https://www.npmjs.com/package/express
用于 Node.js 的快速、独立、简约的 Web 框架。它相对较小，具有许多可用作插件的功能。通常被称为 Node.js 的标准服务器框架。
安装
npm i express案例
const express = require('express')
const app = express()
app.get('/', function (req, res) {
res.send('Hello World')
})
app.listen(3000)如下图：
- Hapi
npm 地址：
https://www.npmjs.com/package/@hapi/hapi
Hapi 最初用于 Express 框架。使用 Hapi，我们可以构建功能强大、可扩展的应用程序，而且开销最小，而且功能齐全，开箱即用。安装
npm i @hapi/hapi如下图：
- Sails
npm 地址：
https://www.npmjs.com/package/sails
Sails 是 Node.js 最流行的 MVC 框架，支持现代应用程序的要求：具有可扩展、面向服务架构的数据驱动 API。
与前端框架一样，也有很多后端替代方案，例如 Adonis 和 Koa。选择一个满足您需求的工具，然后学习它。
npm i sails如下图：
CORS和请求 npm 集合
- Cors
npm 地址：
https://www.npmjs.com/package/cors
一个Node.js 中间件，用于提供 Connect/Express 中间件，可用于启用具有各种选项的跨域资源共享。
npm i cors案例
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.get('/products/:id', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})如下图：
- Axios
npm 地址：
https://www.npmjs.com/package/axios
用于浏览器和 Node.js 的基于 Promise 的 HTTP 客户端。与 JS 内置的 Fetch API 相比，它易于设置、直观且简化了很多东西。
npm i axios案例
import axios from 'axios';
//const axios = require('axios'); // legacy way
// Make a request for a user with a given ID
axios.get('/user?ID=12345')
.then(function (response) {
// handle success
console.log(response);
})
.catch(function (error) {
// handle error
console.log(error);
})
.finally(function () {
// always executed
});
// Optionally the request above could also be done as
axios.get('/user', {
params: {
ID: 12345
}
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
})
.finally(function () {
// always executed
});
// Want to use async/await? Add the `async` keyword to your outer function/method.
async function getUser() {
try {
const response = await axios.get('/user?ID=12345');
console.log(response);
} catch (error) {
console.error(error);
}
}如下图：
- Body-parser
npm 地址：
https://www.npmjs.com/package/body-parser
正文解析中间件，它提取传入请求流的整个正文部分并将其公开在 req.body 上，作为更易于交互的东西。
npm i body-parser案例
var express = require('express')
var bodyParser = require('body-parser')
var app = express()
// parse application/x-www-form-urlencoded
app.use(bodyParser.urlencoded({ extended: false }))
// parse application/json
app.use(bodyParser.json())
app.use(function (req, res) {
res.setHeader('Content-Type', 'text/plain')
res.write('you posted:\n')
res.end(JSON.stringify(req.body, null, 2))
})如下图：
API 服务 npm 集合
- Restify
npm 地址：
https://www.npmjs.com/package/restify
一个 Node.js Web 服务框架，经过优化，可构建语义正确的 RESTful Web 服务，以供大规模生产使用。Restify 针对自身和性能进行了优化。
npm i restify案例
//Server
var restify = require('restify');
const server = restify.createServer({
name: 'myapp',
version: '1.0.0'
});
server.use(restify.plugins.acceptParser(server.acceptable));
server.use(restify.plugins.queryParser());
server.use(restify.plugins.bodyParser());
server.get('/echo/:name', function (req, res, next) {
res.send(req.params);
return next();
});
server.listen(8080, function () {
console.log('%s listening at %s', server.name, server.url);
});
//Client
var assert = require('assert');
var clients = require('restify-clients');
var client = clients.createJsonClient({
url: 'http://localhost:8080',
version: '~1.0'
});
client.get('/echo/mark', function (err, req, res, obj) {
assert.ifError(err);
console.log('Server returned: %j', obj);
});
如下图：
- GraphQL
npm 地址：
https://www.npmjs.com/package/graphql
API 的查询语言和使用现有数据完成这些查询的运行时。提供 API 中数据的完整描述，让客户能够准确地询问他们需要什么。
npm i graphql案例
var source = '{ hello }';
graphql({ schema, source }).then((result) => {
// Prints
// {
// data: { hello: "world" }
// }
console.log(result);
});如下图：
Web sockets npm 集合
- Socket.io
npm 地址：
https://www.npmjs.com/package/socket.io
Socket.IO 支持实时、双向和基于事件的通信。它适用于所有平台、浏览器或设备，同样注重可靠性和速度。
npm i socket.io案例
const server = require('http').createServer();
const io = require('socket.io')(server);
io.on('connection', client => {
client.on('event', data => { /* … */ });
client.on('disconnect', () => { /* … */ });
});
server.listen(3000);如下图：
- WS
npm 地址：
https://www.npmjs.com/package/ws
简单易用、快速且经过全面测试的 WebSocket 客户端和服务器实现。双向和基于事件的通信。它适用于所有平台、浏览器或设备，同样注重可靠性和速度。
npm i ws案例
import WebSocket from 'ws';
const ws = new WebSocket('ws://www.host.com/path');
ws.on('error', console.error);
ws.on('open', function open() {
ws.send('something');
});
ws.on('message', function message(data) {
console.log('received: %s', data);
});如下图：
记录器npm集合
- Morgan
npm 地址：
https://www.npmjs.com/package/morgan
具体来说，它是一个 HTTP 请求记录器，用于存储 HTTP 请求并让我们简要了解应用程序的使用方式以及可能存在的错误。
npm i morgan案例
var express = require('express')
var morgan = require('morgan')
var app = express()
app.use(morgan('combined'))
app.get('/', function (req, res) {
res.send('hello, world!')
})如下图：
- Winston
npm 地址：
https://www.npmjs.com/package/winston
几乎所有内容的记录器，支持多种运输方式。比 Morgan 存在的时间更长，它还拥有更大的维护者社区和更多的下载量。
npm i winston案例
const winston = require('winston');
const logger = winston.createLogger({
level: 'info',
format: winston.format.json(),
defaultMeta: { service: 'user-service' },
transports: [
//
// - Write all logs with importance level of `error` or less to `error.log`
// - Write all logs with importance level of `info` or less to `combined.log`
//
new winston.transports.File({ filename: 'error.log', level: 'error' }),
new winston.transports.File({ filename: 'combined.log' }),
],
});
//
// If we're not in production then log to the `console` with the format:
// `${info.level}: ${info.message} JSON.stringify({ ...rest }) `
//
if (process.env.NODE_ENV !== 'production') {
logger.add(new winston.transports.Console({
format: winston.format.simple(),
}));
}如下图：
数据库工具npm集合
- Mongoose
npm 地址：
https://www.npmjs.com/package/mongoose
Mongoose 是一个 MongoDB 对象建模工具，旨在在异步环境中工作。Mongoose 支持 Promise 和回调。
npm i mongoose案例
import { createRequire } from "https://deno.land/std/node/module.ts";
const require = createRequire(import.meta.url);
const mongoose = require('mongoose');
mongoose.connect('mongodb://127.0.0.1:27017/test')
.then(() => console.log('Connected!'));如下图：
- Sequelize
npm 地址：
https://www.npmjs.com/package/sequelize
Sequelize 是一个基于 Promise 的 Node.js ORM，适用于 Postgres、MySQL、MariaDB、SQLite 和 Microsoft SQL Server。它具有可靠的事务支持、关系、急切和延迟加载、读取复制等。
npm i sequelize如下图：
安全认证工具npm集合
- Passport
npm 地址：
https://www.npmjs.com/package/passport
Passport 的目的是通过称为策略的可扩展插件集对请求进行身份验证。我们向 Passport 提供身份验证请求，而 Passport 提供挂钩来控制身份验证成功或失败时发生的情况。
npm i passport案例
passport.use(new LocalStrategy(
function(username, password, done) {
User.findOne({ username: username }, function (err, user) {
if (err) { return done(err); }
if (!user) { return done(null, false); }
if (!user.verifyPassword(password)) { return done(null, false); }
return done(null, user);
});
}
));如下图：
- Bcrypt
npm 地址：
https://www.npmjs.com/package/bcrypt
帮助我们散列密码的库。Bcrypt 是 Niels Provos 和 David Mazières 设计的密码散列函数，基于 Blowfish 密码并于 1999 年在 USENIX 上提出。
npm i bcrypt案例
const bcrypt = require('bcrypt');
const saltRounds = 10;
const myPlaintextPassword = 's0/\/\P4$$w0rD';
const someOtherPlaintextPassword = 'not_bacon';
bcrypt.genSalt(saltRounds, function(err, salt) {
bcrypt.hash(myPlaintextPassword, salt, function(err, hash) {
// Store hash in your password DB.
});
});如下图：
- JSONWebToken
npm 地址：
https://www.npmjs.com/package/jsonwebtoken
JSON Web 令牌 (JWT) 是一种开放的行业标准 RFC 7519 方法，用于在两方之间安全地表示声明。这个包允许我们解码、验证和生成 JWT。
npm i jsonwebtoken案例
// sign with RSA SHA256
var privateKey = fs.readFileSync('private.key');
var token = jwt.sign({ foo: 'bar' }, privateKey, { algorithm: 'RS256' });如下图：
配置模块npm集合
- Config
npm 地址：
https://www.npmjs.com/package/config
设置存储在应用程序的配置文件中，可以被环境变量、命令行参数或外部源覆盖和扩展。
npm i config案例
{
"Customer": {
"dbConfig": {
"host": "prod-db-server"
},
"credit": {
"initialDays": 30
}
}
}
const config = require('config');
//...
const dbConfig = config.get('Customer.dbConfig');
db.connect(dbConfig, ...);
if (config.has('optionalFeature.detail')) {
const detail = config.get('optionalFeature.detail');
//...
}如下图：
- Dotenv
npm 地址：
https://www.npmjs.com/package/dotenv
它一个零依赖模块，将环境变量从 .env 文件加载到 process.env 中。
npm i dotenv案例
S3_BUCKET="YOURS3BUCKET"
SECRET_KEY="YOURSECRETKEYGOESHERE"
require('dotenv').config()
console.log(process.env) // remove this after you've confirmed it is working如下图：
静态网站生成器npm集合
- Gatsby
npm 地址：
https://www.npmjs.com/package/gatsby
现代网站生成器，可创建快速、高质量、动态的 React 应用程序，从博客到电子商务网站再到用户仪表板。很棒的插件生态系统和模板。
npm i gatsby如下图：
- NextJS
npm 地址：
https://www.npmjs.com/package/next
NextJS 首先支持服务器渲染以及静态生成的内容。我们还可以将无服务器函数定义为 API 端点。
npm i next如下图：
- NuxtJS
npm 地址：
https://www.npmjs.com/package/nuxt
NuxtJS 基本上是 Vue 生态系统中的 NextJS 替代品。NuxtJS 的目标是让 Web 开发功能强大且性能卓越。
npm i nuxt如下图：
模板语言npm集合
- Mustache
npm 地址：
https://www.npmjs.com/package/mustache
Mustache 是一种无逻辑的模板语法。它可以用于 HTML、配置文件、源代码——任何东西。它通过使用散列或对象中提供的值扩展模板中的标签来工作。
npm i mustache案例
var view = {
title: "Joe",
calc: function () {
return 2 + 4;
}
};
var output = Mustache.render("{{title}} spends {{calc}}", view);如下图：
- Handlebars
npm 地址：
https://www.npmjs.com/package/handlebars
使用模板和输入对象来生成 HTML 或其他文本格式。Handlebars 模板看起来像带有嵌入式 Handlebars 表达式的常规文本。Handlebars 在很大程度上与 Mustache 模板兼容。
npm i handlebars案例
var source = "Hello, my name is {{name}}. I am from {{hometown}}. I have " +
"{{kids.length}} kids:
" +
"{{#kids}}- {{name}} is {{age}}
{{/kids}}
";
var template = Handlebars.compile(source);
var data = { "name": "Alan", "hometown": "Somewhere, TX",
"kids": [{"name": "Jimmy", "age": "12"}, {"name": "Sally", "age": "4"}]};
var result = template(data);
// Would render:
// Hello, my name is Alan. I am from Somewhere, TX. I have 2 kids:
//
// - Jimmy is 12
// - Sally is 4
//
如下图：
- EJS
npm 地址：
https://www.npmjs.com/package/ejs
EJS 是一种简单的模板语言，可让我们使用纯 JavaScript 生成 HTML 标记，语法简单、执行速度快、调试方便。EJS 拥有庞大的活跃用户社区，并且该库正在积极开发中。
npm i ejs案例
<% if (user) { %>
<%= user.name %>
<% } %>如下图：
图像处理npm集合
- Sharp
npm 地址：
https://www.npmjs.com/package/sharp
一个很棒的模块，可以将常见格式的大图像转换为更小的、对网络友好的 JPEG、PNG 和不同尺寸的 WebP 图像。
npm i sharp案例
<% if (user) { %>
<%= user.name %>
<% } %>如下图：
- GM
npm 地址：
https://www.npmjs.com/package/gm
借助 Node.js 模块 GM，我们可以直接在代码中使用两种流行的工具来创建、编辑、合成和转换图像 - GraphicsMagick 和 ImageMagick。
npm i gm案例
如下图：
- Cloudinary
npm 地址：
https://www.npmjs.com/package/cloudinary
专用模块可简化云服务的工作，为 Web 应用程序的整个图像管理管道提供解决方案。
npm i cloudinary案例
cloudinary.v2.uploader.upload("/home/my_image.jpg", {upload_preset: "my_preset"}, (error, result)=>{
console.log(result, error);
});如下图：
最后
一台电脑,一个键盘,尽情挥洒智慧的人生;
几行数字,几个字母,认真编写生活的美好;
一 个灵感,一段程序,推动科技进步,促进社会发展。
创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。