这些node开源工具你值得拥有(下)

2023-06-02 0 604

这些node开源工具你值得拥有(下)
❝ 序言:后端天数撷取了那些node开放源码辅助工具你值得称赞保有(上)

主要紧紧围绕git、npm、配置文档辅助工具、FAT辅助工具、统计数据奇偶校验、文档格式聚合辅助工具等各方面。透过整套的车轮来提高我们的合作开发工作效率,来化解在相同情景应用领域中碰到的许多难题

透过写作 awesome-nodejs 库的收录于,我抽出其中许多应用领域情景较为多的进行分类,透过进行分类牵涉的应用领域情景跟我们撷取辅助工具

假如你讨厌这个awesome-nodejs库,请给译者两个star https://github.com/huaize2020/awesome-nodejs/blob/main/README-zh-CN.md

1.绘图 ️

1.1 应用领域情景1: 怎样同时实现给相片做上色、文档格式切换、平移变换、感光加进等操作方式

能采用下列辅助工具:

sharp : 修正JPEG,PNG,WebP和TIFF文档格式影像大小不一的最慢组件。jimp :纯JavaScript中的影像处置。gm:GraphicsMagick 和 ImageMagick PCBlwip :不须要ImageMagick的轻量影像CPU

如下表所示上色图右图

这些node开源工具你值得拥有(下)

❝ 啊翔老师:下面提及ImageMagick是个什么鬼? 非官方如是说: ImageMagick是两套采用方便、平衡所以开放源码的辅助合作开发工具和分布式应用,能用以读、写和处置少于89种基本上文档格式的相片文档,主要包括盛行的TIFF、JPEG、GIF、 PNG、PDF和PhotoCD等文档格式。借助ImageMagick,你能依照web应用领域程序的须要静态聚合相片, 还能对两个(或几组)相片进行发生改变大小不一、转动、渐变、Cogl或减少特技等操作方式

能采用下列辅助工具:

nodeqr-image

你能采用:

jsQR

1.3 应用领域情景3: 怎样对比相片像素是否一致?

能采用下列辅助工具:

pixelmatch: 最小、最简单、最慢的 JavaScript 像素级影像较为库。resemble.js : 相片像素对比辅助工具

1.4 应用领域情景4: 怎样检验相片类型?

能采用下列辅助工具:

image-type : 检测Buffer / Uint8Array的影像类型.

2.构建工具 ⛏️

2.1 应用领域情景1: 构建辅助工具都有哪些?

能采用下列辅助工具:

webpack : 打包浏览器的组件和资产。parcel : 快速,零配置的Web应用领域构建辅助工具。esbuild: 极快的JavaScript打包压缩辅助工具,不采用 ASTrollup : 新一代的 ES2015 打包构建辅助工具。grunt :JavaScript任务执行器。gulp :流式快速构建系统,支持代码而不是配置。snowpack: 是一个相对轻量的 bundless 方案

2.2 应用领域情景2: 支持esm的构建辅助工具有哪些?

能采用下列辅助工具:

vite : 新一代后端构建辅助工具。snowpack

: 由ESM支持的后端构建辅助工具。 即时,轻量,无捆绑合作开发❝ ‍ 啊开童鞋:什么是Bundleless?

须要重新编译单个文档

这些node开源工具你值得拥有(下)

3.缓存

3.1 应用领域情景1: 基于LRU缓存辅助工具算法有哪些?

❝ ‍ 啊乐童鞋:LRU缓存是啥?

LRU 全称叫Least Recently Used,也叫最近最少采用,是一种缓存淘汰算法。核心是内容是假如统计数据最近被访问过,那么将来被访问的几率也更高,相假如是很久都没用过的统计数据会优先对其删除,常用于优化缓存查询性能,主要包括我们采用的框架vue中的keep-alive也是基于该算法开发的

lru-cache :最近最少采用的缓存(LRU)同时实现。hashlru :更轻量更快的LRU算法。ylru :基于hashlru加进过期天数,允许空值。

3.2 应用领域情景2: 基于Node的缓存辅助工具有哪些?

node-cache :Node.js内存缓存组件。node-cache-manager : Node.js Cache组件。

4.最小化

❝ 应用领域的性能优化,我们会想到js、html、css的文档的压缩,使得其文档最小化,那么有什么车轮能直接采用?

4.1 应用领域情景1: js的文档压缩辅助工具有哪些?

uglify-js

: JavaScript压缩辅助工具。❝ ‍ 啊乐童鞋:我记得之前好像有个webpack插件叫uglifyjs-webpack-plugin,跟你说的这个有什么关系?

uglifyjs-webpack-plugin就是基于uglifyjs合作开发的插件,只不过UglifyJs不支持直接处置ES6文档,只能处置ES5文档,对于ES6语法,我们之前的代码最小化过程如下表所示右图向下

这些node开源工具你值得拥有(下)

虽然后来出了Uglify-ES支持处置ES6文档,但也因为存在bug太多,目前该项目也停止维护了。不过后来Terserfork了Uglify-ES然后进行了维护迭代,也就后来有了terser-webpack-plugin

❝ ‍ 啊乐童鞋: 那有没有能支持处置ES6 code的压缩辅助工具

随着浏览器对es6特性支持更多,我们的代码最小化过程如下表所示

这些node开源工具你值得拥有(下)

能采用下列辅助工具:

babel-minify:基于Babel辅助工具链的 ES6+ 压缩库, 以前叫 babiliterser: 用于es6的javascript解析器和混淆压缩辅助工具包

下面是个对比图

这些node开源工具你值得拥有(下)

4.2 应用领域情景2: css的文档压缩辅助工具有哪些?

能采用下列辅助工具:

cssnano: 建立在PostCSS生态系统之上组件化的压缩辅助工具。clean-css: CSS压缩辅助工具。

4.3 应用情景3: 相片压缩辅助工具有哪些?

imagemin: Image压缩辅助工具。

4.4 应用领域情景4:webpack生态有哪些较为主流的压缩插件?

uglifyjs-webpack-plugin: 基于uglifyjs压缩js文档,不支持es6terser-webpack-plugin: 支持压缩 ES6 (Webpack4)html-webpack-plugin: 简化 HTML 文档创建optimize-css-assets-webpack-plugin: 优化减少CSS资源的Webpack插件。webpack5中改为:css-minimizer-webpack-plugin

5. 网络

5.1 应用领域情景

这些node开源工具你值得拥有(下)

能采用下列辅助工具:

node-ip: NodeJS IP地址辅助工具。public-iprequest-ip

5.2 应用领域情景2: 怎样知道当前该采用哪个新的端口?

❝ 啊森同学:我们透过vue-cli这类脚手架运行项目本地合作开发环境的时候,会起两个本地服务并分配两个端口,他这个是怎么做的?

我们在vue-cli源码中,能看到它采用的是node-portfinder, 它不仅能自动检测当后端口是否被占用假如占用还会返回新端口

这些node开源工具你值得拥有(下)
node-portfinder :在当前机器上查找开放端口 或 域套接字的简单辅助工具。get-port

6. HTTP

6.1 应用领域情景1 :有哪些请求库辅助工具能采用?

能采用下列辅助工具:

axios: 基于Promise 的HTTP客户端(也能在浏览器中工作)。request: 简单的 HTTP 请求客户端。superagent: HTTP请求库。node-fetch: Node.js的 window.fetch 同时实现。

6.2 应用领域情景2: 我怎样用node起两个服务?

❝ 我想透过起两个服务,或者做模拟统计数据,或者做静态资源服务器等等,有什么车轮能用?

http-server: 零配置的配置文档Http服务端。anywhere: 随时随地将你的当前目录变成两个静态文档服务器的根目录。json-server

: 在不到30秒的时间内获得具有零编码的完整伪造的REST API。❝ 啊宽老师:假如我想启动两个守护进程?

你能采用比如pm2来启动服务,能保证进程永远都活着

能采用下列辅助工具:

pm2: 高级进程管理辅助工具。nodemon: 监视应用领域程序中的更改并自动重新启动服务器。forever: 简单的CLI辅助工具,用于确认提供的代码持续运行。supervisor: 当脚本崩溃时重新启动脚本,或者当*.js文档更改时重新启动脚本。

6.3 应用领域情景3: 我怎样用Node起两个代理服务?

❝ 我们常常能在webpack中看到webpack-dev-server的配置,然后配置本地合作开发接口映射,以此接化解本地合作开发跨域存在的难题,本质上就是基于http-proxy-middleware中间件 ,透过把后端的API的请求代理到本地服务器上。主要包括mock服务也是一种代理服务,代理服务器只是起两个中转作用,总结用于化解下列三点

❞本地开发代理访问防止跨域

能采用下列辅助工具:

http-proxy: 高级进程管理辅助工具。http-proxy-middleware : ⚡用于connect,express和browser-sync的单线Node.js Http代理中间件。fast-proxy: Node.js框架,使您能将http请求转发到另两个HTTP服务器。 支持的协议:HTTP,HTTPS,HTTP2。

7. 模版引擎

❝ 模板引擎是一个透过结合页面模板、要展示的统计数据聚合HTML页面的辅助工具,本质上是后端渲染(SSR)的需求,加上Node渲染页面本身是纯静态的,当我们须要页面多样化、更灵活,我们就须要采用模板引擎来强化页面,更好的凸显服务端渲染的优势

能采用下列辅助工具:

pug: 是一款健壮、灵活、功能丰富的模板引擎,专门为 Node.js 平台合作开发mustache: 轻量的JavaScript模板引擎{{八字须}}。art-template: 高性能JavaScript模板引擎。handlebars: Mustache 模板的超集,加进了强大的功能,如helper和更高级的block。doT: 最慢简洁的JavaScript模板引擎。

针对性能,我们将相同的辅助工具进行渲染速度对比,可参考下图

这些node开源工具你值得拥有(下)

8. 函数式编程

❝ 函数式编程大量采用函数,使得我们重复代码减少,同时也不会发生改变外界的状态,因为假如依赖,会造成系统复杂性大大提高

能使用下列辅助工具:

immer

: 函数式响应式编程。

immutable

: 不可变的统计数据集合。

lodash

:可提供一致性、自定义、性能和其他功能的实用程序库,比Underscore.js更好更快。

rxjs

: 用于切换、组合和查询各种统计数据的函数式响应式库。

lazy

: 类似于lodash/underline的辅助工具库,但具有惰性计算,在许多情况下能切换为卓越的性能.

9. 文档系统

❝ 我们知道Node体系中有fs组件, 对有关文档进行相应目录的创建、写入及删除操作方式等等。除了现有的api还有没有其他整套的车轮能用

9.1 应用领域情景1: fs组件相关的辅助工具?(文档读取,目录创建,删除)

能采用下列辅助工具:

fs-extra

: 为 fs 组件提供额外方法。

graceful-fs

:graceful-fs能替代fs组件,并做了各种改进。

filesize

: 聚合人类可读的文档大小不一字符串。

make-dir

: 递归创建文件夹,类似 mkdir -p。

find-up

: 透过上级父目录查找文档或目录。

ncp

: 采用Node.js进行异步递归文档复制。

rimraf

: 递归删除文档,类似 rm -rf。

9.2 应用领域情景2: 怎样监控文档变更?

❝ 替换 fs.watch

能采用下列辅助工具:

chokidar : 最小且高效的跨平台Watch库。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务