听说专业的前端工程师都对这些 npm 包爱不释手？

原文地址： 73 Awesome NPM Packages for Productivity 🚀🌱^[1]

原文作者：Madza^[2]

译者：Gopal

译者：本文已经过作者授权翻译，翻译得不好的地方，欢迎大家指出

如今，在我们繁忙的日程和紧迫的截止日期中，选择能够提高工作效率的工具至关重要。

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

当然，你不必安装和学习所有这些工具。在大多数情况下，从每个类别中挑选一个就足够了。我想提供一些替代方案，以便每个读者都能找到一些东西。来一起享受吧！

💻 前端框架

1.React^[3]

React 使用虚拟 DOM 将页面的各个部分作为单独的组件进行管理，从而允许你刷新组件而不刷新整个页面。通常与 React-dom^[4] 和 React-router-dom^[5] 一起使用。

2.Vue^[6]

Vue 是通过结合 React 和其他库的最佳实践而构建出来的，专注于编写更快，更轻松，更愉快 Web 应用程序， 它拥有出色的文档。通常与 Vue-router^[7] 和 Vuex^[8] 一起使用。

3.Svelte^[9]

Svelte 是构建 web 应用程序的一种新方法。它是一个编译器，它接受声明性组件并将它们转换为高效的 JavaScript，从而像动手术一样更新 DOM。

其他值得注意的框架包括 Angular^[10],  Ember^[11],  Backbone^[12],  Preact^[13] 等。你可以对其中任何一个进行神奇的操作，黄金法则是早点学习 现代JS（ES6及更高版本）^[14]。

🎨样式框架

4.Bootstrap^[15]

在用于构建响应式、移动端开发优先的网站方面，是全球的最受欢迎的框架。直观而强大，但体积相对较大。许多现代的 UI 工具包都基于它，例如 React Bootstrap^[16] 或 Reactstrap^[17]。

5.Tailwind^[18]

一种低级别的，比较实用的 CSS 框架，用于快速 UI 开发。从基础上开始建立，并且能够实现超级可定制。

6.Styled-components^[19]

在组件和样式之间架起桥梁的 CSS-in-JS 工具，提供了大量的特性，让你以一种功能性和可重用的方式启动和运行样式组件。

其他出色的解决方案包括 Foundation^[20], Bulma^[21], Materialize^[22] and Ant Design^[23].如果你喜欢编写普通的 CSS，则可以使用一些  CSS 扩展语言，例如 SASS^[24] 来扩展其功能。

🔲 后端框架

7.Express^[25]

为 Node.js 提供了快速、无约束、极简的 web 框架。它是相对较小的，并有较多可用的插件特性。通常被称为 Node.js 的标准服务器框架。

8.Hapi^[26]

Hapi 最初用于 Express 框架。使用 Hapi，你可以以最小的开销和完全开箱即用的功能构建功能强大、拓展性强的应用程序。

9.Sails^[27]

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

与前端框架相同，还有很多后端替代方案，例如 Adonis^[28] 和 Koa^[29]。选择一个适合你的需求并充分学习它。

🔗 CORS 和请求

10.Cors^[30]

Node.js 中间件，提供了各种选项，用于实现跨域资源共享的 Connect / Express 中间件。

11.Axios^[31]

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

12.Body-parser^[33]

主体解析中间件，它提取传入请求流的整个主体部分，并将其公开在 req.body 上，以便与之交互。

🧩 API 服务

13.Restify^[34]

一个 Node.js web 服务框架，为构建语义化的 RESTful web 服务进行了优化，可以大规模生产使用。Restify 优化了自省和性能。

14.GraphQL^[35]

用于 api 的查询语言和用于对运行时的现有数据执行查询。提供 API 中数据的完整描述，使客户端能够准确地要求他们所需要的数据。

🤝 Web sockets

15.Socket.io^[36]

Socket.IO 支持实时，双向和基于事件的通信。它可以在每个平台，浏览器或其他设备上运行，并同时关注可靠性和速度。

16.WS^[37]

简单易用，快速且经过全面测试的 WebSocket 客户端和服务器实现。一个很好的，不太抽象的，Socket.io 的替代方案。

✍ 日志

17.Morgan^[38]

具体来说，它是一个 HTTP 请求记录器，存储 HTTP 请求，并为你提供有关应用程序如何使用以及可能存在潜在错误的简要信息。

18.Winston^[39]

一个几乎所有内容的日志记录器，支持多种传输方式。它存储的时间比 Morgan 长，它也有一个更大的维护者社区和更多的下载。

💾 数据库工具

19.Mongoose^[40]

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

20.Sequelize^[41]

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

🔓 授权工具

21.Passport^[42]

Passport 的目的是通过一组可扩展的插件(称为策略)对请求进行身份验证。向Passport 提供一个身份验证请求，Passport 提供钩子来控制身份验证成功或失败时发生的操作。

22.Bcrypt^[43]

它是可以帮助你生成哈希密码的库。Bcrypt 是由 Niels Provos 和 David Mazieres 基于 Blowfish cipher 设计的密码哈希函数，并于 1999 年在 USENIX 上展出。

23.JSONWebToken^[44]

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

🔧配置模块

24.Config^[45]

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

25.Dotenv^[46]

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

📃 静态网站生成器

26.Gatsby^[47]

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

27.NextJS^[48]

NextJS 首先支持服务器渲染以及静态生成的内容。你还可以将 serverless 功能定义为 API 端点。

28.NuxtJS^[49]

在 Vue 的生态系统中，NuxtJS 基本上是 NextJS 的替代品。NuxtJS 的目标是让 web 开发功能强大，并且让开发者具有良好的开发意识。

🌟模板语言

29.Mustache^[50]

Mustache 是一种无逻辑的模板语法。它可以用于 HTML，配置文件，源代码等任何东西。它的工作原理是使用 hash 或对象中提供的值在模板中展开标记。

30.Handlebars^[51]

使用模板和输入对象生成 HTML 或其他文本格式。Handlebars 模板看起来像一个嵌入了把手表达式的正则文本。Handlebars 很大程度上与 Mustache  模板兼容。

31.EJS^[52]

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

📷 图像处理

32.Sharp^[53]

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

33.GM^[54]

多亏了 Node.js 模块 GM，你可以使用两个流行的工具—— GraphicsMagick 和 ImageMagick 直接在代码中创建，编辑，合成和转换图像。

34.Cloudinary^[55]

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

📅 日期格式化

35.DayJS^[56]

DayJS 是 MomentJS^[57] （自2020年9月起处于维护模式）的一种快速、轻巧的替代方案。它们的 API 使用类似，如果你使用过MomentJS，则已经知道如何使用大多数 DayJS。

36.Luxon^[58]

如果你喜欢另一个轻量级替代方案，并且 API 稍有不同，那么 Luxon 可能是你的正确选择。

🧙‍♂️ 数据生成器

37.Shortid^[59]

创建非常短无序的 url 友好的唯一 ID。非常适合网址缩短、数据库 ID 和其他任何 ID。

译者注：看到官方不推荐再使用，而是推荐使 nanoid^[60]

38.Uuid^[61]

方便而且体积小的包，可以快速、轻松地生成更复杂的通用惟一标识符(UUIDs)。

39.Faker^[62]

实用的 npm 包，用于在浏览器和 Node.js 中制造大量假数据。

✅ 校验工具

40.Validator^[63]

便捷的字符串验证器，使程序更加健壮的库。许多有用方法，例如 isEmail()，isCreditCard()，isDate() 和 isURL()。

41.Joi^[64]

强大的 JavaScript  schema 描述语言和数据验证器。

📧 表单和邮件

42.Formik^[65]

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

43.Multer^[66]

Multer 是用于 multipart/form-data 数据格式的 Node.js 中间件，主要用于上传文件。

44.Nodemailer^[67]

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

🧪 测试

45.Jest^[68]

Jest 是一个令人愉快的 JavaScript 测试框架，专注于简洁明快。它允许你使用易于使用、熟悉且功能丰富的 API 编写测试，从而快速获得结果。

46.Mocha^[69]

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

💫  Web 抓取和自动化

47.Cheerio^[70]

Cheerio 广泛用于 web 抓取工作，有时也用于自动执行任务。它非常快，因为它是基于 jquery 的。Cheerio 安装了 Parse5 解析器，能够解析任何类型的 HTML 和 XML 文档。

48.Puppeteer^[71]

Puppeteer 被广泛用于自动执行浏览器任务，并且只能与谷歌 chrome 无头浏览器(即 chromium)一起工作。Puppeteer 还可以用于 web 抓取任务。与 Cheerio 模块相比，它功能强大，功能丰富。

🌷 检测和格式化工具

49.ESLint^[72]

ESLint 是用于识别和报告 ECMAScript / JavaScript 代码中的书写方式的工具。ESLint 是完全插件化的，每个规则都是一个插件，你可以在运行时添加更多内容。

50.Prettier^[73]

Prettier 是一种固执己见的代码格式化程序。它通过解析代码并使用自己的规则(考虑到最大行的长度)重新打印代码，以及在必要时包装代码，来强制执行一致的样式。

📦 模块打包和压缩器

51.Webpack^[74]

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

52.HTML-Minifier^[75]

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

53.Clean-CSS^[76]

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

54.UglifyJS2^[77]

JavaScript 解析器，压缩程序和美化工具包。它可以使用多个输入文件，并支持许多配置选项。

👨‍💻进程管理和运行

55.Nodemon^[78]

在 Node.js 应用程序的开发过程中使用的简单的监控脚本。对于开发非常有用，因为它非常容易重启，并且默认启用了文件监听

56.PM2^[79]

带有内置负载均衡的 Node.JS 应用程序的生产进程管理器。更全面，更适合生产，给你很多参数以进行调整功能

57.Concurrently^[80]

简单而直接——这是同时运行多个命令的有用工具。

🚧 CLI 和调试工具

58.Commander^[81]

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

59.Inquirer^[82]

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

60.Chalk^[83]

Chalk 是一个非常简单的库，创建它的目的很简单——给你的终端字符串添加样式。

61.Debug^[84]

一个很小的 JavaScript 调试实用程序。只需将一个函数的名称传递给模块，它就会返回一个经过修饰的 console.error 版本，以便你将调试语句传递给该模块。

🧰 工具库

62.Lodash^[85]

现代化的 JavaScript 实用程序库，提供模块化，高性能以及其他功能。公开关于 JavaScript 数组，对象和其他数据结构的许多有用方法。

63.Underscore^[86]

Underscore 提供了许多常用的功能工具以及更专业的工具：函数绑定，javascript 模板，创建快速索引，深度相等测试等。

64.Async^[87]

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

🔩 系统模块

65.Fs-extra^[88]

fs -extra 包含了 Node.js fs 包中没有包含的方法，比如 copy(), remove(), mkdirs()

66.Node-dir^[89]

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

67.Node-cache^[90]

一个简单的缓存模块，具有设置，获取和删除方法的功能，类似于memcached^[91]。key 值可以具有一个超时设置（ttl），在此时间之后它们将过期并从缓存中删除。

🧷 其它:

68.Helmet^[92]

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

69.PDFKit^[93]

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

70.CSV^[94]

全面的 CSV 套件，结合了 4 个经过测试的软件包，可以生成，解析，转换和字符串化 CSV 数据。

71.Marked^[95]

用于解析 markdown 而不需要缓存或长时间阻塞的低级编译器。

72.Randomcolor^[96]

一个用于生成有吸引力的随机颜色的小脚本。你可以传递选项对象从而决定其产生的颜色类型。

73.Pluralize^[97]

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

希望你找到了对你有用的有用 npm 包！

感谢你阅读，可以关注我^[98]获取更多信息！

往期优秀文章推荐

• 【webpack 性能优化】编译速度从 50S 到 7S^[99]
• 一个合格的中级前端工程师应该掌握的 20 个 Vue 技巧^[100]
• 【Vue进阶】——如何实现组件属性透传？^[101]
• 前端应该知道的 HTTP 知识【金九银十必备】^[102]
• 最强大的 CSS 布局 —— Grid 布局^[103]
• 如何用 Typescript 写一个完整的 Vue 应用程序^[104]
• 前端应该知道的web调试工具——whistle^[105]

参考资料