分享 73 个让你事半功倍的 NPM 包

前端达人

共 9117字,需浏览 19分钟

 · 2022-02-17


英文 | 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
该模块使用预先定义的规则列表,按顺序应用,以单数或复数给定的单词。在很多情况下这很有用,例如,任何基于用户输入的自动化。
本文完~

学习更多技能
请点击下方公众号

浏览 62
点赞
评论
收藏
分享

手机扫一扫分享

举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

举报