现代流行的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集合Websocketsnpm集合记录器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。comnpmnpm
　　NPM是Node。js的包管理工具（Nodepackagemanager）。能解决NodeJS代码部署上的很多问题。常见的使用场景有以下几种：允许用户从NPM服务器下载别人编写的第三方包到本地使用。允许用户从NPM服务器下载并安装别人编写的命令行程序到本地使用。允许用户将自己编写的包或命令行程序上传到NPM服务器供别人使用。
　　NPM为开发者们打开了整个JavaScript的世界。它是世界上最大的软件注册机构，每周下载量约为30亿次。该注册表包含600，000多个包（构建代码块）。
　　如下图：
　　前端框架npm集合React
　　npm地址：https：www。npmjs。compackagereact
　　React使用虚拟DOM将页面的各个部分作为单独的组件进行管理，允许我们在不刷新整个页面的情况下刷新组件。通常与Reactdom和Reactrouterdom一起使用。
　　安装npmireact
　　案例import｛useState｝fromreact；import｛createRoot｝fromreactdomclient；functionCounter（）｛const〔count，setCount〕useState（0）；return（h1｛count｝h1buttononClick｛（）setCount（count1）｝Incrementbutton）；｝constrootcreateRoot（document。getElementById（root））；root。render（）；
　　如下图：
　　Vue
　　npm地址：https：www。npmjs。compackagevue
　　Vue专注于使编写Web应用程序更快、更容易、更愉快的特性。它有很棒的文档。通常与Vuerouter和Vuex一起使用。
　　安装npmivue
　　如下图：
　　Svelte
　　npm地址：https：www。npmjs。compackagesvelte
　　Svelte是一种构建Web应用程序的新方法。它是一个编译器，它获取你的声明性组件并将它们转换为高效的JavaScript，从而通过手术方式更新DOM。
　　其他值得注意的框架包括Angular、Ember、Backbone、Preact等。你可以用它们中的任何一个来创造奇迹，黄金法则是提前学习现代JS（ES6及更高版本）。
　　安装npmisvelte
　　如下图：
　　样式框架npm集合Bootstrap
　　npm地址：https：www。npmjs。compackagebootstrap
　　世界上最流行的UI框架，用于构建响应式、移动优先的网站。直观且功能强大，但体积相对较大。许多现代UI工具包都基于它，例如ReactBootstrap或Reactstrap。
　　安装npmibootstrap
　　如下图：
　　Tailwind
　　npm地址：https：www。npmjs。compackagetailwindcss
　　用于快速UI开发的低级、实用程序优先的CSS框架。从头开始构建，可定制。
　　安装npmitailwindcss
　　如下图：
　　Styledcomponents
　　npm地址：https：www。npmjs。compackagestyledcomponents
　　CSSinJS工具，弥合了组件和样式之间的差距，提供了许多功能，让我们以功能性和可重用的方式启动和运行样式化组件。
　　其他出色的解决方案包括Foundation、Bulma、Materialize和AntDesign。如果喜欢写VanillaCSS，我们可以使用一些CSS扩展语言，比如SASS，来扩展它的特性。
　　安装npmistyledcomponents
　　如下图：
　　后端框架npm集合Express
　　npm地址：https：www。npmjs。compackageexpress
　　用于Node。js的快速、独立、简约的Web框架。它相对较小，具有许多可用作插件的功能。通常被称为Node。js的标准服务器框架。
　　安装npmiexpress
　　案例constexpressrequire（express）constappexpress（）app。get（，function（req，res）｛res。send（HelloWorld）｝）app。listen（3000）
　　如下图：
　　Hapi
　　npm地址：https：www。npmjs。compackagehapihapi
　　Hapi最初用于Express框架。使用Hapi，我们可以构建功能强大、可扩展的应用程序，而且开销最小，而且功能齐全，开箱即用。安装npmihapihapi
　　如下图：
　　Sails
　　npm地址：https：www。npmjs。compackagesails
　　Sails是Node。js最流行的MVC框架，支持现代应用程序的要求：具有可扩展、面向服务架构的数据驱动API。
　　与前端框架一样，也有很多后端替代方案，例如Adonis和Koa。选择一个满足您需求的工具，然后学习它。npmisails
　　如下图：
　　CORS和请求npm集合Cors
　　npm地址：https：www。npmjs。compackagecors
　　一个Node。js中间件，用于提供ConnectExpress中间件，可用于启用具有各种选项的跨域资源共享。npmicors
　　案例varexpressrequire（express）varcorsrequire（cors）varappexpress（）app。use（cors（））app。get（products：id，function（req，res，next）｛res。json（｛msg：ThisisCORSenabledforallorigins！｝）｝）app。listen（80，function（）｛console。log（CORSenabledwebserverlisteningonport80）｝）
　　如下图：
　　Axios
　　npm地址：https：www。npmjs。compackageaxios
　　用于浏览器和Node。js的基于Promise的HTTP客户端。与JS内置的FetchAPI相比，它易于设置、直观且简化了很多东西。npmiaxios
　　案例importaxiosfromaxios；constaxiosrequire（axios）；legacywayMakearequestforauserwithagivenIDaxios。get（user？ID12345）。then（function（response）｛handlesuccessconsole。log（response）；｝）。catch（function（error）｛handleerrorconsole。log（error）；｝）。finally（function（）｛alwaysexecuted｝）；Optionallytherequestabovecouldalsobedoneasaxios。get（user，｛params：｛ID：12345｝｝）。then（function（response）｛console。log（response）；｝）。catch（function（error）｛console。log（error）；｝）。finally（function（）｛alwaysexecuted｝）；Wanttouseasyncawait？Addtheasynckeywordtoyourouterfunctionmethod。asyncfunctiongetUser（）｛try｛constresponseawaitaxios。get（user？ID12345）；console。log（response）；｝catch（error）｛console。error（error）；｝｝
　　如下图：
　　Bodyparser
　　npm地址：https：www。npmjs。compackagebodyparser
　　正文解析中间件，它提取传入请求流的整个正文部分并将其公开在req。body上，作为更易于交互的东西。npmibodyparser
　　案例varexpressrequire（express）varbodyParserrequire（bodyparser）varappexpress（）parseapplicationxwwwformurlencodedapp。use（bodyParser。urlencoded（｛extended：false｝））parseapplicationjsonapp。use（bodyParser。json（））app。use（function（req，res）｛res。setHeader（ContentType，textplain）res。write（youposted：）res。end（JSON。stringify（req。body，null，2））｝）
　　如下图：
　　API服务npm集合Restify
　　npm地址：https：www。npmjs。compackagerestify
　　一个Node。jsWeb服务框架，经过优化，可构建语义正确的RESTfulWeb服务，以供大规模生产使用。Restify针对自身和性能进行了优化。npmirestify
　　案例Servervarrestifyrequire（restify）；constserverrestify。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）；returnnext（）；｝）；server。listen（8080，function（）｛console。log（slisteningats，server。name，server。url）；｝）；Clientvarassertrequire（assert）；varclientsrequire（restifyclients）；varclientclients。createJsonClient（｛url：http：localhost：8080，version：1。0｝）；client。get（echomark，function（err，req，res，obj）｛assert。ifError（err）；console。log（Serverreturned：j，obj）；｝）；
　　如下图：
　　GraphQL
　　npm地址：https：www。npmjs。compackagegraphql
　　API的查询语言和使用现有数据完成这些查询的运行时。提供API中数据的完整描述，让客户能够准确地询问他们需要什么。npmigraphql
　　案例varsource｛hello｝；graphql（｛schema，source｝）。then（（result）｛Prints｛data：｛hello：world｝｝console。log（result）；｝）；
　　如下图：
　　Websocketsnpm集合Socket。io
　　npm地址：https：www。npmjs。compackagesocket。io
　　Socket。IO支持实时、双向和基于事件的通信。它适用于所有平台、浏览器或设备，同样注重可靠性和速度。npmisocket。io
　　案例constserverrequire（http）。createServer（）；constiorequire（socket。io）（server）；io。on（connection，client｛client。on（event，data｛｝）；client。on（disconnect，（）｛｝）；｝）；server。listen（3000）；
　　如下图：
　　WS
　　npm地址：https：www。npmjs。compackagews
　　简单易用、快速且经过全面测试的WebSocket客户端和服务器实现。双向和基于事件的通信。它适用于所有平台、浏览器或设备，同样注重可靠性和速度。npmiws
　　案例importWebSocketfromws；constwsnewWebSocket（ws：www。host。compath）；ws。on（error，console。error）；ws。on（open，functionopen（）｛ws。send（something）；｝）；ws。on（message，functionmessage（data）｛console。log（received：s，data）；｝）；
　　如下图：
　　记录器npm集合Morgan
　　npm地址：https：www。npmjs。compackagemorgan
　　具体来说，它是一个HTTP请求记录器，用于存储HTTP请求并让我们简要了解应用程序的使用方式以及可能存在的错误。npmimorgan
　　案例varexpressrequire（express）varmorganrequire（morgan）varappexpress（）app。use（morgan（combined））app。get（，function（req，res）｛res。send（hello，world！）｝）
　　如下图：
　　Winston
　　npm地址：https：www。npmjs。compackagewinston
　　几乎所有内容的记录器，支持多种运输方式。比Morgan存在的时间更长，它还拥有更大的维护者社区和更多的下载量。npmiwinston
　　案例constwinstonrequire（winston）；constloggerwinston。createLogger（｛level：info，format：winston。format。json（），defaultMeta：｛service：userservice｝，transports：〔Writealllogswithimportanceleveloferrororlesstoerror。logWritealllogswithimportancelevelofinfoorlesstocombined。lognewwinston。transports。File（｛filename：error。log，level：error｝），newwinston。transports。File（｛filename：combined。log｝），〕，｝）；Ifwerenotinproductionthenlogtotheconsolewiththeformat：｛info。level｝：｛info。message｝JSON。stringify（｛。。。rest｝）if（process。env。NODEENV！production）｛logger。add（newwinston。transports。Console（｛format：winston。format。simple（），｝））；｝
　　如下图：
　　数据库工具npm集合Mongoose
　　npm地址：https：www。npmjs。compackagemongoose
　　Mongoose是一个MongoDB对象建模工具，旨在在异步环境中工作。Mongoose支持Promise和回调。npmimongoose
　　案例import｛createRequire｝fromhttps：deno。landstdnodemodule。ts；constrequirecreateRequire（import。meta。url）；constmongooserequire（mongoose）；mongoose。connect（mongodb：127。0。0。1：27017test）。then（（）console。log（Connected！））；
　　如下图：
　　Sequelize
　　npm地址：https：www。npmjs。compackagesequelize
　　Sequelize是一个基于Promise的Node。jsORM，适用于Postgres、MySQL、MariaDB、SQLite和MicrosoftSQLServer。它具有可靠的事务支持、关系、急切和延迟加载、读取复制等。npmisequelize
　　如下图：
　　安全认证工具npm集合Passport
　　npm地址：https：www。npmjs。compackagepassport
　　Passport的目的是通过称为策略的可扩展插件集对请求进行身份验证。我们向Passport提供身份验证请求，而Passport提供挂钩来控制身份验证成功或失败时发生的情况。npmipassport
　　案例passport。use（newLocalStrategy（function（username，password，done）｛User。findOne（｛username：username｝，function（err，user）｛if（err）｛returndone（err）；｝if（！user）｛returndone（null，false）；｝if（！user。verifyPassword（password））｛returndone（null，false）；｝returndone（null，user）；｝）；｝））；
　　如下图：
　　Bcrypt
　　npm地址：https：www。npmjs。compackagebcrypt
　　帮助我们散列密码的库。Bcrypt是NielsProvos和DavidMazires设计的密码散列函数，基于Blowfish密码并于1999年在USENIX上提出。npmibcrypt
　　案例constbcryptrequire（bcrypt）；constsaltRounds10；constmyPlaintextPasswords0P4w0rD；constsomeOtherPlaintextPasswordnotbacon；bcrypt。genSalt（saltRounds，function（err，salt）｛bcrypt。hash（myPlaintextPassword，salt，function（err，hash）｛StorehashinyourpasswordDB。｝）；｝）；
　　如下图：
　　JSONWebToken
　　npm地址：https：www。npmjs。compackagejsonwebtoken
　　JSONWeb令牌（JWT）是一种开放的行业标准RFC7519方法，用于在两方之间安全地表示声明。这个包允许我们解码、验证和生成JWT。npmijsonwebtoken
　　案例signwithRSASHA256varprivateKeyfs。readFileSync（private。key）；vartokenjwt。sign（｛foo：bar｝，privateKey，｛algorithm：RS256｝）；
　　如下图：
　　配置模块npm集合Config
　　npm地址：https：www。npmjs。compackageconfig
　　设置存储在应用程序的配置文件中，可以被环境变量、命令行参数或外部源覆盖和扩展。npmiconfig
　　案例｛Customer：｛dbConfig：｛host：proddbserver｝，credit：｛initialDays：30｝｝｝constconfigrequire（config）；。。。constdbConfigconfig。get（Customer。dbConfig）；db。connect（dbConfig，。。。）；if（config。has（optionalFeature。detail））｛constdetailconfig。get（optionalFeature。detail）；。。。｝
　　如下图：
　　Dotenv
　　npm地址：https：www。npmjs。compackagedotenv
　　它一个零依赖模块，将环境变量从。env文件加载到process。env中。npmidotenv
　　案例S3BUCKETYOURS3BUCKETSECRETKEYYOURSECRETKEYGOESHERErequire（dotenv）。config（）console。log（process。env）removethisafteryouveconfirmeditisworking
　　如下图：
　　静态网站生成器npm集合Gatsby
　　npm地址：https：www。npmjs。compackagegatsby
　　现代网站生成器，可创建快速、高质量、动态的React应用程序，从博客到电子商务网站再到用户仪表板。很棒的插件生态系统和模板。npmigatsby
　　如下图：
　　NextJS
　　npm地址：https：www。npmjs。compackagenext
　　NextJS首先支持服务器渲染以及静态生成的内容。我们还可以将无服务器函数定义为API端点。npminext
　　如下图：
　　NuxtJS
　　npm地址：https：www。npmjs。compackagenuxt
　　NuxtJS基本上是Vue生态系统中的NextJS替代品。NuxtJS的目标是让Web开发功能强大且性能卓越。npminuxt
　　如下图：
　　模板语言npm集合Mustache
　　npm地址：https：www。npmjs。compackagemustache
　　Mustache是一种无逻辑的模板语法。它可以用于HTML、配置文件、源代码任何东西。它通过使用散列或对象中提供的值扩展模板中的标签来工作。npmimustache
　　案例varview｛title：Joe，calc：function（）｛return24；｝｝；varoutputMustache。render（｛｛title｝｝spends｛｛calc｝｝，view）；
　　如下图：
　　Handlebars
　　npm地址：https：www。npmjs。compackagehandlebars
　　使用模板和输入对象来生成HTML或其他文本格式。Handlebars模板看起来像带有嵌入式Handlebars表达式的常规文本。Handlebars在很大程度上与Mustache模板兼容。npmihandlebars
　　案例varsourcepHello，mynameis｛｛name｝｝。Iamfrom｛｛hometown｝｝。Ihave｛｛kids。length｝｝kids：ul｛｛kids｝｝li｛｛name｝｝is｛｛age｝｝li｛｛kids｝｝ul；vartemplateHandlebars。compile（source）；vardata｛name：Alan，hometown：Somewhere，TX，kids：〔｛name：Jimmy，age：12｝，｛name：Sally，age：4｝〕｝；varresulttemplate（data）；Wouldrender：pHello，mynameisAlan。IamfromSomewhere，TX。Ihave2kids：ulliJimmyis12liliSallyis4liul
　　如下图：
　　EJS
　　npm地址：https：www。npmjs。compackageejs
　　EJS是一种简单的模板语言，可让我们使用纯JavaScript生成HTML标记，语法简单、执行速度快、调试方便。EJS拥有庞大的活跃用户社区，并且该库正在积极开发中。npmiejs
　　案例lt；if（user）｛h2lt；user。nameh2lt；｝
　　如下图：
　　图像处理npm集合Sharp
　　npm地址：https：www。npmjs。compackagesharp
　　一个很棒的模块，可以将常见格式的大图像转换为更小的、对网络友好的JPEG、PNG和不同尺寸的WebP图像。npmisharp
　　案例lt；if（user）｛h2lt；user。nameh2lt；｝
　　如下图：
　　GM
　　npm地址：https：www。npmjs。compackagegm
　　借助Node。js模块GM，我们可以直接在代码中使用两种流行的工具来创建、编辑、合成和转换图像GraphicsMagick和ImageMagick。npmigm
　　案例constfsrequire（fs）constgmrequire（gm）。subClass（｛appPath：String。rawC：ProgramFilesImageMagick7。1。0Q16HDRImagick。exe｝）；
　　如下图：
　　Cloudinary
　　npm地址：https：www。npmjs。compackagecloudinary
　　专用模块可简化云服务的工作，为Web应用程序的整个图像管理管道提供解决方案。npmicloudinary
　　案例cloudinary。v2。uploader。upload（homemyimage。jpg，｛uploadpreset：mypreset｝，（error，result）｛console。log（result，error）；｝）；
　　如下图：
　　最后
　　一台电脑，一个键盘，尽情挥洒智慧的人生；
　　几行数字，几个字母，认真编写生活的美好；
　　一个灵感，一段程序，推动科技进步，促进社会发展。
　　创作不易，喜欢的老铁们加个关注，点个赞，打个赏，后面会不定期更新干货和技术相关的资讯，速速收藏，谢谢！你们的一个小小举动就是对小编的认可，更是创作的动力。