大家好，我是Echa。

在我们繁忙的日程和紧迫的项目期限内，选择能够提高工作效率的工具，就显得至关重要。那作为程序员开发包管理工具那是必不可少的。

小编记得2020年3月17日，Github宣布收购npm，GitHub现在已经保证npm将永远免费。

今天我们聊聊NPM。若Node.js没有NPM，会怎样呢？

小编一句话概括：npm 之于 Node.js ，就像 pip 之于 Python， gem 之于 Ruby， pear 之于 PHP ，JDK 之于 Java。

由于内容有点多，现代流行的 npm包大全 分上下两篇

全文大纲

1. NPM介绍
2. 前端框架npm 集合
3. 样式框架npm 集合
4. 后端框架npm 集合
5. CORS和请求 npm 集合
6. API 服务 npm 集合
7. Web sockets npm 集合
8. 记录器npm集合
9. 数据库工具npm集合
10. 安全认证工具npm集合
11. 配置模块npm集合
12. 静态网站生成器npm集合
13. 模板语言npm集合
14. 图像处理npm集合
15. 日期格式npm集合
16. 数据生成器npm集合
17. 验证者npm集合
18. 表格和电子邮件npm集合
19. 测试工具npm集合
20. 网页抓取和自动化npm集合
21. Linters 和格式化程序npm集合
22. 模块打包器和最小化器npm集合
23. 流程管理器和运行器npm集合
24. CLI 和调试器npm集合
25. 实用程序npm集合
26. 系统模块npm集合
27. 其他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 集合

1. 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}
       setCount(count + 1)}>
        Increment
      
    
  );
}

const root = createRoot(document.getElementById('root'));
root.render();

如下图：

2. Vue

npm 地址：
https://www.npmjs.com/package/vue

Vue 专注于使编写 Web 应用程序更快、更容易、更愉快的特性。它有很棒的文档。通常与 Vue-router 和 Vuex 一起使用。

安装

npm i vue

如下图：

3. Svelte

npm 地址：
https://www.npmjs.com/package/svelte

Svelte 是一种构建 Web 应用程序的新方法。它是一个编译器，它获取你的声明性组件并将它们转换为高效的 JavaScript，从而通过手术方式更新 DOM。

其他值得注意的框架包括 Angular、Ember、Backbone、Preact 等。你可以用它们中的任何一个来创造奇迹，黄金法则是提前学习现代 JS（ES6 及更高版本）。

安装

npm i svelte

如下图：

样式框架npm 集合

1. Bootstrap

npm 地址：
https://www.npmjs.com/package/bootstrap

世界上最流行的UI框架，用于构建响应式、移动优先的网站。直观且功能强大，但体积相对较大。许多现代 UI 工具包都基于它，例如 React Bootstrap 或 Reactstrap。

安装

npm i bootstrap

如下图：

2. Tailwind

npm 地址：
https://www.npmjs.com/package/tailwindcss

用于快速 UI 开发的低级、实用程序优先的 CSS 框架。从头开始构建，可定制。

安装

npm i tailwindcss

如下图：

3. 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 集合

1. 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)

如下图：

2. Hapi

npm 地址：
https://www.npmjs.com/package/@hapi/hapi

Hapi 最初用于 Express 框架。使用 Hapi，我们可以构建功能强大、可扩展的应用程序，而且开销最小，而且功能齐全，开箱即用。安装

npm i  @hapi/hapi

如下图：

3. Sails

npm 地址：
https://www.npmjs.com/package/sails

Sails 是 Node.js 最流行的 MVC 框架，支持现代应用程序的要求：具有可扩展、面向服务架构的数据驱动 API。

与前端框架一样，也有很多后端替代方案，例如 Adonis 和 Koa。选择一个满足您需求的工具，然后学习它。

npm i  sails

如下图：

CORS和请求 npm 集合

1. 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')
})

如下图：

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

如下图：

3. 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 集合

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

如下图：

2. 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 集合

1. 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);

如下图：

2. 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集合

1. 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!')
})

如下图：

2. 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集合

1. 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!'));

如下图：

2. Sequelize

npm 地址：
https://www.npmjs.com/package/sequelize

Sequelize 是一个基于 Promise 的 Node.js ORM，适用于 Postgres、MySQL、MariaDB、SQLite 和 Microsoft SQL Server。它具有可靠的事务支持、关系、急切和延迟加载、读取复制等。

npm i sequelize

如下图：

安全认证工具npm集合

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

如下图：

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

如下图：

3. 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集合

1. 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');
  //...
}

如下图：

2. 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集合

1. Gatsby

npm 地址：
https://www.npmjs.com/package/gatsby

现代网站生成器，可创建快速、高质量、动态的 React 应用程序，从博客到电子商务网站再到用户仪表板。很棒的插件生态系统和模板。

npm i gatsby

如下图：

2. NextJS

npm 地址：
https://www.npmjs.com/package/next

NextJS 首先支持服务器渲染以及静态生成的内容。我们还可以将无服务器函数定义为 API 端点。

npm i next

如下图：

3. NuxtJS

npm 地址：
https://www.npmjs.com/package/nuxt

NuxtJS 基本上是 Vue 生态系统中的 NextJS 替代品。NuxtJS 的目标是让 Web 开发功能强大且性能卓越。

npm i nuxt

如下图：

模板语言npm集合

1. 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);

如下图：

2. 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
// 

如下图：

3. EJS

npm 地址：
https://www.npmjs.com/package/ejs

EJS 是一种简单的模板语言，可让我们使用纯 JavaScript 生成 HTML 标记，语法简单、执行速度快、调试方便。EJS 拥有庞大的活跃用户社区，并且该库正在积极开发中。

npm i ejs

案例

<% if (user) { %>
  
<%= user.name %>
<% } %>

如下图：

图像处理npm集合

1. Sharp

npm 地址：
https://www.npmjs.com/package/sharp

一个很棒的模块，可以将常见格式的大图像转换为更小的、对网络友好的 JPEG、PNG 和不同尺寸的 WebP 图像。

npm i sharp

案例

<% if (user) { %>
  
<%= user.name %>
<% } %>

如下图：

2. GM

npm 地址：
https://www.npmjs.com/package/gm

借助 Node.js 模块 GM，我们可以直接在代码中使用两种流行的工具来创建、编辑、合成和转换图像 - GraphicsMagick 和 ImageMagick。

npm i gm

案例

如下图：

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

如下图：

最后

一台电脑,一个键盘,尽情挥洒智慧的人生;

几行数字,几个字母,认真编写生活的美好;

一 个灵感,一段程序,推动科技进步,促进社会发展。

创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。