现代流行的npm包大全（上）

　　大家好，我是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}
        setCount(count + 1)}>         Increment               ); }  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: ＂)   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
　　案例{   console.log(result, error); });
　　如下图：
　　最后
　　一台电脑,一个键盘,尽情挥洒智慧的人生;
　　几行数字,几个字母,认真编写生活的美好;
　　一 个灵感,一段程序,推动科技进步,促进社会发展。
　　创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。