英文 | https://dev.to/madza/73-awesome-npm-packages-for-productivity-19p8

翻译 | 杨小爱

在我们繁忙的日程和紧迫的项目期限内，选择能够提高工作效率的工具，就显得至关重要。

在这里，我整理了一些我最喜欢的 NPM 包的列表。我还对它们进行了分类，因此信息更加结构化并且更易于浏览。

当然，我们不必全部安装和学习它们。在大多数情况下，从每个类别中挑选一个两个就足够了。我想提供一些替代方案，以便我们能找到一些更好的工具。

现在，我们就开始今天的内容吧。

前端框架

1、React 

地址：https://www.npmjs.com/package/react

React 使用虚拟 DOM 将页面的各个部分作为单独的组件进行管理，允许我们在不刷新整个页面的情况下刷新组件。通常与 React-dom 和 React-router-dom 一起使用。

2、Vue

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

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

3、Svelte 

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

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

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

样式框架

4、Bootstrap

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

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

5、Tailwind

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

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

6、Styled-components

地址：https://www.npmjs.com/package/styled-components

CSS-in-JS 工具，弥合了组件和样式之间的差距，提供了许多功能，让我们以功能性和可重用的方式启动和运行样式化组件。

其他出色的解决方案包括 Foundation、Bulma、Materialize 和 Ant Design。如果喜欢写 Vanilla CSS，我们可以使用一些 CSS 扩展语言，比如 SASS，来扩展它的特性。

后端框架

7、Express

地址：https://www.npmjs.com/package/express

用于 Node.js 的快速、独立、简约的 Web 框架。它相对较小，具有许多可用作插件的功能。通常被称为 Node.js 的标准服务器框架。

8、Hapi

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

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

9、Sails 

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

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

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

CORS 和请求

10、Cors

地址：https://www.npmjs.com/package/cors

一个Node.js 中间件，用于提供 Connect/Express 中间件，可用于启用具有各种选项的跨域资源共享。

11、Axios

地址：https://www.npmjs.com/package/axios

用于浏览器和 Node.js 的基于 Promise 的 HTTP 客户端。与 JS 内置的 Fetch API 相比，它易于设置、直观且简化了很多东西。

12、Body-parser

地址：https://www.npmjs.com/package/body-parser

正文解析中间件，它提取传入请求流的整个正文部分并将其公开在 req.body 上，作为更易于交互的东西。

API 服务

13、Restify

地址：https://www.npmjs.com/package/restify

一个 Node.js Web 服务框架，经过优化，可构建语义正确的 RESTful Web 服务，以供大规模生产使用。Restify 针对自省和性能进行了优化。

14、GraphQL

地址：https://www.npmjs.com/package/graphql

API 的查询语言和使用现有数据完成这些查询的运行时。提供 API 中数据的完整描述，让客户能够准确地询问他们需要什么。

Web sockets

15、Socket.io

地址：https://www.npmjs.com/package/socket.io

Socket.IO 支持实时、双向和基于事件的通信。它适用于所有平台、浏览器或设备，同样注重可靠性和速度。

16、WS

地址：https://www.npmjs.com/package/ws

简单易用、快速且经过全面测试的 WebSocket 客户端和服务器实现。 

记录器

17、Morgan

地址：https://www.npmjs.com/package/morgan

具体来说，它是一个 HTTP 请求记录器，用于存储 HTTP 请求并让我们简要了解应用程序的使用方式以及可能存在的错误。

18、Winston

地址：https://www.npmjs.com/package/winston

几乎所有内容的记录器，支持多种运输方式。比 Morgan 存在的时间更长，它还拥有更大的维护者社区和更多的下载量。

数据库工具

19、Mongoose 

地址：https://www.npmjs.com/package/mongoose

Mongoose 是一个 MongoDB 对象建模工具，旨在在异步环境中工作。Mongoose 支持 Promise 和回调。

20、Sequelize 

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

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

认证工具

21、Passport

地址：https://www.npmjs.com/package/passport

Passport 的目的是通过称为策略的可扩展插件集对请求进行身份验证。我们向 Passport 提供身份验证请求，而 Passport 提供挂钩来控制身份验证成功或失败时发生的情况。

22、Bcrypt

地址：https://www.npmjs.com/package/bcrypt

帮助我们散列密码的库。Bcrypt 是 Niels Provos 和 David Mazières 设计的密码散列函数，基于 Blowfish 密码并于 1999 年在 USENIX 上提出。

23、JSONWebToken

地址：https://www.npmjs.com/package/jsonwebtoken

JSON Web 令牌 (JWT) 是一种开放的行业标准 RFC 7519 方法，用于在两方之间安全地表示声明。这个包允许我们解码、验证和生成 JWT。

 配置模块

24、Config

地址：https://www.npmjs.com/package/config

设置存储在应用程序的配置文件中，可以被环境变量、命令行参数或外部源覆盖和扩展。

25、Dotenv

地址：https://www.npmjs.com/package/dotenv

它一个零依赖模块，将环境变量从 .env 文件加载到 process.env 中。

静态网站生成器

26、Gatsby

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

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

27、NextJS

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

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

28、NuxtJS

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

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

模板语言

29、Mustache

地址：https://www.npmjs.com/package/mustache

Mustache 是一种无逻辑的模板语法。它可以用于 HTML、配置文件、源代码——任何东西。它通过使用散列或对象中提供的值扩展模板中的标签来工作。

30、Handlebars

地址：https://www.npmjs.com/package/handlebars

使用模板和输入对象来生成 HTML 或其他文本格式。Handlebars 模板看起来像带有嵌入式 Handlebars 表达式的常规文本。Handlebars 在很大程度上与 Mustache 模板兼容。

31、EJS

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

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

图像处理

32、Sharp

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

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

33、GM

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

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

34、Cloudinary

地址：https://www.npmjs.com/package/cloudinary

专用模块可简化云服务的工作，为 Web 应用程序的整个图像管理管道提供解决方案。

日期格式

35、DayJS

地址：https://www.npmjs.com/package/dayjs

DayJS 是 MomentJS 的快速轻量级替代品（自 2020 年 9 月起处于维护模式）。使用类似的 API - 如果您使用过 MomentJS，那肯定已经知道如何使用大部分 DayJS。

36、Luxon

地址：https://www.npmjs.com/package/luxon

如果您喜欢另一种轻量级的替代方案，API 略有不同，那么 Luxon 可能是我们的正确选择。

数据生成器

37、Shortid

地址：https://www.npmjs.com/package/shortid

它可以创建一个非常短的非顺序的url 唯一id。它非常适合 url 缩短器、DB id 和任何其他 id。

38、Uuid

地址：https://www.npmjs.com/package/uuid

这个一个非常方便的微型包，可快速轻松地生成更复杂的通用唯一标识符 (UUID)。

39、Faker

地址：https://www.npmjs.com/package/faker

用于在浏览器和 Node.js 中生成大量虚假数据的有用包。

验证者

40、Validator

地址：https://www.npmjs.com/package/validator

这是一个非常方便的字符串验证器库。它有许多有用的方法，可以便于我们快速使用，例如 isEmail()、isCreditCard()、isDate() 和 isURL()。

41、Joi

地址：https://www.npmjs.com/package/joi

它是一个强大的 JavaScript 模式，描述语言和数据验证器。

表格和电子邮件

42、Formik

地址：https://www.npmjs.com/package/formik

Formik 是一个流行的 React 和 React Native 开源表单库。它易于使用、声明性和自适应性。

43、Multer 

地址：https://www.npmjs.com/package/multer

Multer 是一个用于处理 multipart/form-data 的 Node.js 中间件，主要用于上传文件。

44、Nodemailer

地址：https://www.npmjs.com/package/nodemailer

Nodemailer 是 Node.js 应用程序的一个模块，可以轻松发送电子邮件。该项目早在 2010 年就开始了，今天它是大多数 Node.js 用户默认使用的解决方案。

测试

45、Jest

地址：https://www.npmjs.com/package/jest

Jest 是一个令人愉快的 JavaScript 测试框架，专注于简单性。它允许我们使用平易近人、熟悉且功能丰富的 API 编写测试，从而快速为我们提供结果。

46、Mocha

地址：https://www.npmjs.com/package/mocha

Mocha 是一个 JavaScript 测试框架，让异步测试变得简单有趣。Mocha 测试连续运行，允许灵活准确的报告，同时，将未捕获的异常映射到正确的测试用例。

网页抓取和自动化

47、Cheerio

地址：https://www.npmjs.com/package/cheerio

Cheerio 广泛用于网络抓取工作，有时还用于自动化任务。它基于 jquery 非常快速和快速。Cheerio 封装了 Parse5 解析器，能够解析任何类型的 HTML 和 XML 文档。

48、Puppeteer

地址：https://www.npmjs.com/package/puppeteer

Puppeteer 广泛用于自动执行浏览器任务，并且只能与 google chrome 浏览器（即 chromium）一起使用。Puppeteer 也可用于网页抓取任务。与 Cheerio 模块相比，它功能强大且功能丰富。

Linters 和格式化程序

49、ESLint

地址：https://www.npmjs.com/package/eslint

ESLint 是一种用于识别和报告在 ECMAScript/JavaScript 代码中发现的模式的工具。ESLint 是完全可插拔的，每一条规则都是一个插件，我们可以在运行时添加更多。

50、Prettier

地址：https://www.npmjs.com/package/prettier

Prettier 是一个固执己见的代码格式化程序。它通过解析您的代码并使用自己的规则重新打印它来执行一致的样式，这些规则考虑了最大行长度，并在必要时包装代码。

模块打包器和最小化器

51、Webpack

地址：https://www.npmjs.com/package/webpack

著名且功能强大的模块捆绑器。它的主要目的是捆绑 JavaScript 文件以在浏览器中使用，但它也能够转换、捆绑或打包几乎任何资源或资产。

52、HTML-Minifier

地址：https://www.npmjs.com/package/html-minifier

轻量级、高度可配置且经过良好测试的基于 Javascript 的 HTML 压缩器/压缩器（支持 Node.js）。

53、Clean-CSS

地址：https://www.npmjs.com/package/clean-css

适用于 Node.js 平台和任何现代浏览器的快速高效的 CSS 优化器。高度可配置和许多兼容模式。

54、UglifyJS2

地址：https://www.npmjs.com/package/uglify-js

JavaScript 解析器、压缩器、压缩器和美化工具包。它可以接受多个输入文件并支持许多配置选项。

流程管理器和运行器

55、Nodemon

地址：https://www.npmjs.com/package/nodemon

用于开发 Node.js 应用程序的简单监控脚本。对开发很有用，因为它非常容易重新启动，并且默认启用和烘焙文件监视。

56、PM2

地址：https://www.npmjs.com/package/pm2

带有内置负载均衡器的 Node.JS 应用程序的生产流程管理器。更全面，更适合生产。为我们提供许多参数来调整/采取行动。

57、Concurrently

地址：https://www.npmjs.com/package/concurrently

简单直接 - 用于同时运行多个命令的有用工具。

CLI 和调试器

58、Commander

地址：https://www.npmjs.com/package/commander

提供流畅的 API 用于定义 CLI 应用程序的各个方面，例如命令、选项、别名和帮助。简化命令行应用程序的创建。

59、Inquirer

地址：https://www.npmjs.com/package/inquirer

用于 Node.js 的易于嵌入且美观的命令行界面。提供很棒的查询会话流程。

60、Chalk

地址：https://www.npmjs.com/package/chalk

Chalk 是一个非常简单的库，创建一个简单的目的 - 为我们的终端字符串设置样式。

61、Debug

地址：https://www.npmjs.com/package/debug

一个小型的 JavaScript 调试工具。只需将模块名称传递给函数，它就会返回console.error 的修饰版本，供我们传递调试语句。

实用程序

62、Lodash

地址：https://www.npmjs.com/package/lodash

提供模块化、性能和附加功能的现代 JavaScript 实用程序库。在 JavaScript 数组、对象和其他数据结构上公开了许多有用的方法。

63、Underscore

地址：https://www.npmjs.com/package/underscore

Underscore 提供了许多常用的函数助手以及更专业的好东西：函数绑定、javascript 模板、创建快速索引、深度相等测试等。

64、Async

地址：https://www.npmjs.com/package/async

Async 是一个实用模块，它为使用异步 JavaScript 提供了直接、强大的功能。

系统模块

65、Fs-extra

地址：https://www.npmjs.com/package/fs-extra

Fs-extra 包含原版 Node.js fs 包中未包含的方法，例如 copy()、remove()、mkdirs()。

66、Node-dir

地址：https://www.npmjs.com/package/node-dir

用于一些常见目录和文件操作的模块，包括用于获取文件数组、子目录以及读取和处理文件内容的方法。

67、Node-cache

地址：https://www.npmjs.com/package/node-cache

一个简单的缓存模块，具有设置、获取和删除方法，工作方式有点像 memcached。密钥可以有一个超时 (ttl)，之后它们就会过期并从缓存中删除。

其他

68、Helmet

地址：https://www.npmjs.com/package/helmet

通过设置各种 HTTP 标头来帮助我们保护我们的应用程序。它是 Connect 风格的中间件，与 Express 等框架兼容。

69、PDFKit

地址：https://www.npmjs.com/package/pdfkit

DFKit 是一个用于 Node 和浏览器的 PDF 文档生成库，可以轻松创建复杂的、多页的、可打印的文档。

70、CSV

地址：https://www.npmjs.com/package/csv

全面的 CSV 套件结合了 4 个经过良好测试的包来生成、解析、转换和字符串化 CSV 数据。

71、Marked

地址：https://www.npmjs.com/package/marked

用于解析 Markdown 的低级编译器，无需长时间缓存或阻塞。

72、Randomcolor

地址：https://www.npmjs.com/package/randomcolor

用于生成有吸引力的随机颜色的小脚本。我们可以传递一个选项对象来影响它产生的颜色类型。

73、Pluralize

地址：https://www.npmjs.com/package/pluralize

该模块使用预先定义的规则列表，按顺序应用，以单数或复数给定的单词。在很多情况下这很有用，例如，任何基于用户输入的自动化。

本文完~

学习更多技能

请点击下方公众号