作者丨 Madza
译者丨核子可乐
策划丨小智
面对繁忙的日程安排与紧迫的工期限制,选择能够切实提升生产率的工具无疑至关重要。
在这里,我整理出一份个人最喜欢的 NPM 软件包清单。为了便于浏览,我还对它们进行了分类,希望呈现出更加清晰的结构。
当然,大家不必全数安装与学习。在大多数情况下,每个类别选择一款就足以解决生产需求。我只是想多提供一点替代方案,帮助每位读者朋友找到最适合自己的选项。闲言少叙,咱们马上开始!
? 前端框架
1.React
React 使用虚拟 DOM 将页面中的各个部分作为单独的组件进行管理,因此您可以只刷新该组件而非整个页面。React 经常配合 React-dom 与 React-router-dom 一同使用。
项目链接:
https://www.npmjs.com/package/react
2.Vue
Vue 将 React 及其他框架的优点集于一身,强调以更快、更轻松、更愉悦的使用感受编写 Web 应用程序。Vue 的说明文档质量极高,而且经常配合 Vue-router 与 Vuex 一同使用。
项目链接:
https://www.npmjs.com/package/vue
3.Svelte
Svelte 是一种新的 Web 应用程序构建方法。这是一款编译器,能够将您的声明性组件转换为可以精确对 DOM 加以更新的高效 JavaScript。
其他出色框架还包括 Angular,Ember,Backbone,Preact 等等。大家选择哪一款都没有问题,但请务必注意一点——先认真学习现代 JS(ES6 及更高)。
项目链接:
https://www.npmjs.com/package/svelte
? 样式框架
4.Bootstrap
全球最受欢迎的框架选项,用于构建响应式、移动优先型网站。其直观而强大,但体积也相对较大。包括 React Bootstrap 与 Reactstrap 在内的众多现代 UI 软件包都以 Bootstrap 为基础。
项目链接:
https://www.npmjs.com/package/bootstrap
5.Tailwind
一种低级、实用程序优先型 CSS 框架,用于快速 UI 开发。凭借着从零开始的构建过程,Tailwind 可实现超级灵活的自定义空间。
项目链接:
https://www.npmjs.com/package/tailwindcss
6.Styled-components
CSS-in-JS 类工具,纸弥合了组件与样式之间的鸿沟,提供一系列功能,使您能够以功能性及可复用方式启动并运行样式组件。
其他重要解决方案还包括 Foundation,Bulma,Materialize 以及 Ant Design。如果您更倾向于编写经典 CSS,也可以使用某些 CSS 扩展语言(例如 SASS)扩展其功能。
项目链接:
https://www.npmjs.com/package/styled-components
? 后端框架
7.Express
一种快速、广受好评的极简 Node.js Web 框架。其体积相对较小,具有众多可作为插件使用的功能。很多人将其视为 Node.js 服务器框架的客观标准。
项目链接:
https://www.npmjs.com/package/express
8.Hapi
Hapi 最初用于 Express 框架。使用 Hapi,您能够以最低开销配合完整的即用型功能构建起强大的可扩展应用程序。
项目链接:
https://www.npmjs.com/package/@hapi/hapi
9.Sails
Sails 是目前最具人气的 Node.js MVC 框架,可支持现代应用的一大核心需求:构建起数据驱动型 API,并辅以可扩展且面向服务的架构。
与前端框架类似,后端开发蝇的替代解决方案也不少,例如 Adonis 与 Koa。请按实际需求进行选择,然后深入学习吧~
项目链接:
https://www.npmjs.com/package/sails
? CORS 与请求
10.Cors
Node.js 中间件,旨在提供一款 Connect/Express 中间件配合多种选项实现跨域资源共享。
项目链接:
https://www.npmjs.com/package/cors
11.Axios
基于Promise的浏览器与 Node.js HTTP 客户端,易于设置、直观并对众多操作加以简化,带来比 Fetch API 更合理的使用体验。
项目链接:
https://www.npmjs.com/package/axios
12.Body-parser
主体解析中间件,用下载提取传入请求流中完整主体部分,并将其公开在 req.body 上以供交互。
项目链接:
https://www.npmjs.com/package/body-parser
? API 服务
13.Restify
一套 Node.js Web 服务框架,经过优化以构建语义正确的 RESTful Web 服务供规模化生产使用。Restify 针对自省与性能进行了优化。
项目链接:
https://www.npmjs.com/package/restify
14.GraphQL
一种面向 API 的查询语言,同时也是可利用现有数据完成查询的运行时。GraphQL 在 API 中提供完整的数据描述,使客户端能够准确获取其需要的信息。
项目链接:
https://www.npmjs.com/package/graphql
? Web sockets
15.Socket.io
Socket.IO 支持实时、双向、基于事件的通信功能。它能够运行在各类平台、浏览器及设备之上,且拥有良好的可靠性与速度表现。
项目链接:
https://www.npmjs.com/package/socket.io
16.WS
易于使用、快速且经过全面测试的 WebSocket 客户端与服务器实现。同时也是一套强大、抽象度更低且几乎能够与 Socket.io 相媲美的替代方案。
项目链接:
https://www.npmjs.com/package/ws
✍ 记录器
17.Morgan
一款 HTTP 请求记录器,能够存储 HTTP 请求并为用户提供应用运作方式以及潜在错误的简明见解。
项目链接:
https://www.npmjs.com/package/morgan
18.Winston
一款几乎支持所有传输方式的记录器。其历史比 Morgan 更长,也拥有更大的维护者社区及更广泛的使用规模。
项目链接:
https://www.npmjs.com/package/winston
? 数据库工具
19.Mongoose
Mongoose 是一款用于在异步环境下使用的 MongoDB 对象建模工具。Mongoose 支持回调机制。
项目链接:
https://www.npmjs.com/package/mongoose
20.Sequelize
Sequelize 是一款基于Promise的 Node.js ORM,适用于 Postgres、MySQL、MariaDB、SQLite 以及微软 SQL Server。其具有可靠的事务支持、关键、急切与延迟加载、读取副本等功能。
项目链接:
https://www.npmjs.com/package/sequelize
? 身份验证工具
21.Passport
Passport 的目标在于通过一组策略(可扩展插件)对请求进行身份验证。您向 Passport 提交一项身份验证请求,其会提供 hook 以控制身份验证成功或失败时各自对应的处理方式。
项目链接:
https://www.npmjs.com/package/passport
22.Bcrypt
用于密码散列处理的库。Bcrypt 是由 Niels Provos 与 David Mazières 共同设计的一种密码散列函数,以 Blowfish 密码为基础,于 1999 年首次在 USENIX 上亮相。
项目链接:
https://www.npmjs.com/package/bcrypt
23.JSONWebToken
JSON Web Tokens (JWT) 是一种开放的行业标准 RFC 7519 方法,用于在两端之间安全表达声明。此工具包允许您对 JWT 进行解码、验证与生成。
项目链接:
https://www.npmjs.com/package/jsonwebtoken
? 配置模块
24.Config
对存储在应用程序中的配置文件进行设置,可以通过环境变量、命令行参数或外部源进行覆盖及扩展。
项目链接:
https://www.npmjs.com/package/config
25.Dotenv
零依赖模块,用于将环境变量从.env 文件加载至 process.env 当中。
项目链接:
https://www.npmjs.com/package/dotenv
? 静态站点生成器
26.Gatsby
一款现代站点生成器,能够创建快速、高质量的动态 React 应用,涵盖博客、电子商务网站及用户仪表板等使用场景。拥有良好的插件生态与模板选项。
项目链接:
https://www.npmjs.com/package/gatsby
27.NextJS
NextJS 支持服务器渲染以及静态内容生态,您也可以在其中将无服务器函数定义为 API 端点。
项目链接:
https://www.npmjs.com/package/next
28.NuxtJS
NuxtJS 在本质上属于 Vue 生态系统中的 NextJS 替代方案。NuxtJS 的目标是令 Web 开发变得更加强大且高效,同时充分保障开发人员的使用体验。
项目链接:
https://www.npmjs.com/package/nuxt
?模板语言
29.Mustache
Mustache 是一种无逻辑模板语法,适用于 HTML、配置文件以及源代码等几乎一切场景。它通过使用哈希或对象中提供的值,在模板内扩展标签。
项目链接:
https://www.npmjs.com/package/mustache
30.Handlebars
使用模板及输入对象生成 HTML 或其他文本格式。Handlebars 模板在观感上类似于带有内嵌 Handlebars 表达式的常规文本。Handlebars 与 Mustache 模板具有良好的兼容性。
项目链接:
https://www.npmjs.com/package/handlebars
31.EJS
EJS 是一种简单的模板语言,允许您通过简单语法、快速执行与简单调试等便捷优势生成以 JavaScript 编写而成的 HTML 标记。EJS 拥有庞大的活跃用户社区,且自身发展态势也相当繁荣。
项目链接:
https://www.npmjs.com/package/ejs
? 图像处理
32.Sharp
一款出色的模块,能够将常见格式的大图像转换为尺寸较小、适合网络浏览环境的 JPEG、PNG 及 WebP 图像。
项目链接:
https://www.npmjs.com/package/sharp
33.GM
归功于 Node.js 模块 GM,您可以使用 GraphicsMagick 与 ImageMagick 两大出色工具在代码中对图像进行创建、编辑、合成与转换。
项目链接:
https://www.npmjs.com/package/gm
34.Cloudinary
可简化与云服务间协作的专用模块,为 Web 应用程序的整个图像管理管道提供解决方案。
项目链接:
https://www.npmjs.com/package/cloudinary
? 日期格式
35.DayJS
DayJS 是一款快速且轻量化的 MomentJS(自 2020 年 9 月起进入纯维护模式) 替代方案。二者拥有类似的 API,只要您接触过 MomentJS,就能够快速上手 DayJS。
项目链接:
https://www.npmjs.com/package/dayjs
36.Luxon
前两者的另一种轻量级替代方案,但 API 稍有不同。
项目链接:
https://www.npmjs.com/package/luxon
?♂️ 数据生成器
37.Shortid
能够创建出简短无序 url 友好型唯一 ID,适合作为 url 缩短器、生成数据库 ID 及其他各类 ID。
项目链接:
https://www.npmjs.com/package/shortid
38.Uuid
便捷的微型软件包,能够快速生成更为复杂的通用唯一标识符(UUID)。
项目链接:
https://www.npmjs.com/package/uuid
39.Faker
非常实用的工具包,用于在浏览器及 Node.js 中生成大量假数据。
项目链接:
https://www.npmjs.com/package/faker
✅ 验证工具
40.Validator
便捷的字符串验证器与消毒库。其中包含多种实用方法,例如 isEmail(),isCreditCard(),isDate() 以及 isURL()。
项目链接:
https://www.npmjs.com/package/validator
41.Joi
面向 JavaScript 的强大 schema 描述语言与数据验证器。
项目链接:
https://www.npmjs.com/package/joi
? 表单与电子邮件
42.Formik
Formik 是一款流行的开源表单库,易于使用且具备声明性及自适应性。
项目链接:
https://www.npmjs.com/package/formik
43.Multer
Multer 是一款 Node.js 中间件,用于处理上传文件中的多部分 / 表单数据。
项目链接:
https://www.npmjs.com/package/multer
44.Nodemailer
Nodemailer 是一款面向 Node.js 应用程序的模块,可轻松通过电子邮件进行发送。项目诞生于 2010 年,如今已经成为大多数 Node.js 用户的默认解决方案。
项目链接:
https://www.npmjs.com/package/nodemailer
? 测试工具
45.Jest
Jest 是一款便捷好用的 JavaScript 测试框架,以简单为核心诉求。您可以通过易于上手且功能丰富的 API 编写测试,从而快速获取结果。
项目链接:
https://www.npmjs.com/package/jest
46.Mocha
Mocha 是一套 JavaScript 测试框架,使异步测试变得更加简单有趣。Mocha 以串行方式运行测试,能够在未捕获异常与正确测试用例加以映射的同时,发布灵活而准确的报告结果。
项目链接:
https://www.npmjs.com/package/mocha
? Web 抓取与自动化
47.Cheerio
Cheerio 被广泛用于 Web 抓取,有时还身兼自动化任务。其基于 jQuery,运行速度极快。Cheerio 中打包有 Parse5 解析器,能够解析任何类型的 HTML 与 XML 文档。
项目链接:
https://www.npmjs.com/package/cheerio
48.Puppeteer
Puppeteer 被广泛应用于浏览器任务自动化领域,且只能与谷歌 Chrome 无头浏览器配合使用。Puppeteer 也可用于网络抓取任务。与 Cheerio 模块相比,其功能更加强大丰富。
项目链接:
https://www.npmjs.com/package/puppeteer
? Linters 与格式化工具
49.ESLint
ESLint 用于识别并报告 ECMAScript/JavaScript 代码中的模式。ESLint 具备全面的可插入特性,每项规则对应一款插件,供您在运行时添加更多内容。
项目链接:
https://www.npmjs.com/package/eslint
50.Prettier
Prettier 是一款风格鲜明的代码格式化程序。它通过解析代码并使用自己的规则(限定最大行长)对代码进行重新输出,借此实现统一的样式;亦可在必要时对代码进行打包。
项目链接:
https://www.npmjs.com/package/prettier
? 模块捆绑器与最小化工具
51.Webpack
一款著名且功能强大的模块捆绑器,旨在捆绑 JavaScript 以供浏览器环境使用。它也能够转换、捆绑或打包几乎一切资源或资产。
项目链接:
https://www.npmjs.com/package/webpack
52.HTML-Minifier
轻量化、高度可配置且经过良好测试的,基于 JavaScript 的 HTML 压缩器 / 最小化工具(支持 Node.js)。
项目链接:
https://www.npmjs.com/package/html-minifier
53.Clean-CSS
适用于 Node.js 平台以及一切现代浏览器的快速高效 CSS 优化器,提供极高的可配置度与多种兼容模式。
项目链接:
https://www.npmjs.com/package/clean-css
54.UglifyJS2
JavaScript 解析器、最小化工具、压缩器及美化工具包。它可以使用多个输入文件,并支持丰富的配置选项。
项目链接:
https://www.npmjs.com/package/uglify-js
?? 进程管理器与运行器
55.Nodemon
在 Node.js 应用开发期间使用的简单监控脚本。易于重启并默认启用并监控文件变更,因此特别适合匹配开发流程使用。
项目链接:
https://www.npmjs.com/package/nodemon
56.PM2
带有内置负载均衡器的 Node.js 应用生产流程管理器。更全面也更适合生产需求。您可以通过众多参数进行调整 / 操作。
项目链接:
https://www.npmjs.com/package/pm2
57.Concurrently
简单而直接——可同时运行多条命令的实用工具。
项目链接:
https://www.npmjs.com/package/concurrently
? CLI 与调试器
58.Commander
提供流畅的 API,用于定义 CLI 应用程序中的各类元素,包括命令、选项、别名及帮助等。简化了命令行应用程序的创建过程。
项目链接:
https://www.npmjs.com/package/commander
59.Inquirer
一款易于嵌入且非常美观的 Node.js 命令行界面,提供很棒的查询会话流程。
项目链接:
https://www.npmjs.com/package/inquirer
60.Chalk
Chalk 是一款非常简单的库,只负责实现一项功能——对终端字符串样式进行设置。
项目链接:
https://www.npmjs.com/package/chalk
61.Debug
一款微型 JavaScript 调试实用程序。只需将一个函数名称传递给该模块,它就会返回一个经过修饰的 console.error 版本,以便将调试语句向其传递。
项目链接:
https://www.npmjs.com/package/debug
? 实用程序
62.Lodash
一套现代 JavaScript 实用程序库,提供模块化、性能与多种附加功能。可提供关于 JavaScript 数组、对象及其他数据结构的多种实用功能。
项目链接:
https://www.npmjs.com/package/lodash
63.Underscore
提供多种常用的功能助手及专业工具,包括函数绑定、JavaScript 模块化、创建快速索引、深度相等测试等。
项目链接:
https://www.npmjs.com/package/underscore
64.Async
Async 提供直观而强大的功能以配合异步 JavaScript。
项目链接:
https://www.npmjs.com/package/async
? 系统模块
65.Fs-extra
Fs-extra 包含经典 Node.js fs 包中未提供的多种方法,例如 copy(),remove(),mkdirs() 等。
项目链接:
https://www.npmjs.com/package/fs-extra
66.Node-dir
用于各类常见目录及文件操作的模块,包括获取文件数组、子目录以及对文件内容进行读取 / 处理的方法。
项目链接:
https://www.npmjs.com/package/node-dir
67.Node-cache
一个简单的缓存模块,具有设置、获取及删除等方法,工作原理类似于 memcached。各键将拥有对应超时(ttl),超时后其将过期并被从缓存中删除。
项目链接:
https://www.npmjs.com/package/node-cache
? 其他:
68.Helmet
帮助您设置各种 HTTP 标头以保护应用程序。它属于 Connect 式中间件,与 Express 等框架相兼容。
项目链接:
https://www.npmjs.com/package/helmet
69.PDFKit
DFKit 是一套面向 Node 及浏览器的 PDF 文档生成库,可轻松创建复杂的多页可打印文档。
项目链接:
https://www.npmjs.com/package/pdfkit
70.CSV
全面的 CSV 套件,包含 4 款经过全面测试的软件包,能够轻松实现 CSV 数据的生成、解析、转换与字符串化处理。
项目链接:
https://www.npmjs.com/package/csv
71.Marked
用于解析 markdown 代码的低级编译器,不会引发长时间缓存或阻塞。
项目链接:
https://www.npmjs.com/package/marked
72.Randomcolor
一款用于生成美观随机颜色的小型脚本,您可以通过选项对象调整其产生的颜色类型。
项目链接:
https://www.npmjs.com/package/randomcolor
73.Pluralize
此模块使用预定义规则表,按顺序应用各项规则以生成特定单词的单数或复数形式。适用于以用户输入为基础进行自动化调整等场景。
项目链接:
https://www.npmjs.com/package/pluralize
延伸阅读:
https://dev.to/madza/73-awesome-npm-packages-for-productivity-19p8