百度360必应搜狗淘宝本站头条
当前位置:网站首页 > 技术文章 > 正文

Pug 3.0.0正式发布,不再支持 Node.js 6/8

zhezhongyun 2025-01-13 19:09 37 浏览


作者:李俊辰 前端之巅

转发链接:https://mp.weixin.qq.com/s/q-49Gf-SFijeu7d2MqztIQ

前言

近日,Pug 3.0.0 正式发布,Pug 原名 Jade,是由 TJHolowaychuk 开发的一款模板引擎,也是 Haml 的 JavaScript 实现版本。Pug 3.0.0 增加了一些新功能,除此之外新版本将不再支持 Node.js 6 和 Node.js 8。

重大变化

  • 如果想使用支持 renderBuffer 的过滤器,read 插件必须返回到 Buffer。如果开发者不希望使用这一功能,则可以像从前一样返回 string。
  • 使用 minify 过滤器上的选项需要安装相应的 jstransformer,目前支持的有:
    • jstransformer-uglify-js:用于 JavaScript
    • jstransformer-clean-css:用于 CSS
  • 不再支持 Node.js 6 和 Node.js 8。

新功能

  • Pug 3.0.0 中加入了新的 each...of... 循环。该语法可以使开发者遍历 Maps、Sets 和 Arrays,比之前的 each...in... 语法更高效,此版本依旧支持 each...in... 语法。
  • 支持编写对二进制数据(例如图像)进行操作的过滤器,可以导入图像,应用过滤器并输出优化的标签,这一操作可以缩短页面加载时间,并使 Web 应用程序更加易于部署。

例如:

// options.js
exports.filters = {
png: {
// instead of a function, specify an object with a "renderBuffer" property
// whose value is a function that takes a Buffer instead of a string
renderBuffer: function(buffer, options) {
var data = Buffer.from(buffer).toString('base64');
return '<img src="data:image/png;base64, ' + data + '"/>';
        }
    }
};

然后就可以使用该过滤器了:

// foo.pug
include:png my-small-image.png
  • 支持使用 generateCode 生成替换代码。

Rolling 版本

作者表示,自从他将 Pug 的单独的软件包合并到“mono repo”中以来,发行的难度增加了,后经一位 ThreadsStyling 的同事介绍了解到了语义释放,进而广泛地使用它,不过仍有一些限制:

  • 语义释放不适用于 mono 仓库;
  • 语义发布需要精确格式化的提交消息;
  • 语义发布每次提交仅允许一项功能 / 错误修复 / 重大修改。

作者一直认为解决此问题的方法是将更改日志附加到拉取请求,而不是提交请求。所以在过去的 6 个月中,他一直在探索这个问题的解决方案。此次的 Rolling 版本提供了一个简单的用户界面,可以将更改日志附加到请求中的特定软件包。然后,它会提供一个 CLI 来发布软件包,开发者可以在持续集成服务上运行该软件包。

Pug 采用简化语法的方式,将原本臃肿的 HTML 标记精简化,同时还有很多优点:超强的可读性、灵活易用的缩进、块扩展、代码默认经过代码处理以增加安全性、拥有编译和运行时的上下文错误报告、命令行编译支持、HTML5 模式、可选的内存缓存、联合动态的静态标记类、利用过滤器解析树的处理...

因为这些优点,Pug 收获了很多开发者的好评。开发者表示,Pug 和 Vue 简直是天作之合,大幅度提高了编码效率,不过 Pug 似乎不太适合与 React 一起使用,因为关闭标签会浪费太多行代码。

推荐JavaScript经典实例学习资料文章

纯JS手写轮播图(代码逻辑清晰,通俗易懂)

JavaScript 20 年 中文版之创立标准

值得收藏的前端常用60余种工具方法「JS篇」

箭头函数和常规函数之间的 5 个区别

通过发布/订阅的设计模式搞懂 Node.js 核心模块 Events

「前端篇」不再为正则烦恼

「速围」Node.js V14.3.0 发布支持顶级 Await 和 REPL 增强功能

深入细品浏览器原理「流程图」

JavaScript 已进入第三个时代,未来将何去何从?

前端上传前预览文件 image、text、json、video、audio「实践」

深入细品 EventLoop 和浏览器渲染、帧动画、空闲回调的关系

推荐13个有用的JavaScript数组技巧「值得收藏」

前端必备基础知识:window.location 详解

不要再依赖CommonJS了

犀牛书作者:最该忘记的JavaScript特性

36个工作中常用的JavaScript函数片段「值得收藏」

Node + H5 实现大文件分片上传、断点续传

一文了解文件上传全过程(1.8w字深度解析)「前端进阶必备」

【实践总结】关于小程序挣脱枷锁实现批量上传

手把手教你前端的各种文件上传攻略和大文件断点续传

字节跳动面试官:请你实现一个大文件上传和断点续传

谈谈前端关于文件上传下载那些事【实践】

手把手教你如何编写一个前端图片压缩、方向纠正、预览、上传插件

最全的 JavaScript 模块化方案和工具

「前端进阶」JS中的内存管理

JavaScript正则深入以及10个非常有意思的正则实战

前端面试者经常忽视的一道JavaScript 面试题

一行JS代码实现一个简单的模板字符串替换「实践」

JS代码是如何被压缩的「前端高级进阶」

前端开发规范:命名规范、html规范、css规范、js规范

【规范篇】前端团队代码规范最佳实践

100个原生JavaScript代码片段知识点详细汇总【实践】

关于前端174道 JavaScript知识点汇总(一)

关于前端174道 JavaScript知识点汇总(二)

关于前端174道 JavaScript知识点汇总(三)

几个非常有意思的javascript知识点总结【实践】

都2020年了,你还不会JavaScript 装饰器?

JavaScript实现图片合成下载

70个JavaScript知识点详细总结(上)【实践】

70个JavaScript知识点详细总结(下)【实践】

开源了一个 JavaScript 版敏感词过滤库

送你 43 道 JavaScript 面试题

3个很棒的小众JavaScript库,你值得拥有

手把手教你深入巩固JavaScript知识体系【思维导图】

推荐7个很棒的JavaScript产品步骤引导库

Echa哥教你彻底弄懂 JavaScript 执行机制

一个合格的中级前端工程师需要掌握的 28 个 JavaScript 技巧

深入解析高频项目中运用到的知识点汇总【JS篇】

JavaScript 工具函数大全【新】

从JavaScript中看设计模式(总结)

身份证号码的正则表达式及验证详解(JavaScript,Regex)

浏览器中实现JavaScript计时器的4种创新方式

Three.js 动效方案

手把手教你常用的59个JS类方法

127个常用的JS代码片段,每段代码花30秒就能看懂-【上】

深入浅出讲解 js 深拷贝 vs 浅拷贝

手把手教你JS开发H5游戏【消灭星星】

深入浅出讲解JS中this/apply/call/bind巧妙用法【实践】

手把手教你全方位解读JS中this真正含义【实践】

书到用时方恨少,一大波JS开发工具函数来了

干货满满!如何优雅简洁地实现时钟翻牌器(支持JS/Vue/React)

手把手教你JS 异步编程六种方案【实践】

让你减少加班的15条高效JS技巧知识点汇总【实践】

手把手教你JS开发H5游戏【黄金矿工】

手把手教你JS实现监控浏览器上下左右滚动

JS 经典实例知识点整理汇总【实践】

2.6万字JS干货分享,带你领略前端魅力【基础篇】

2.6万字JS干货分享,带你领略前端魅力【实践篇】

简单几步让你的 JS 写得更漂亮

恭喜你获得治疗JS this的详细药方

谈谈前端关于文件上传下载那些事【实践】

面试中教你绕过关于 JavaScript 作用域的 5 个坑

Jquery插件(常用的插件库)

【JS】如何防止重复发送ajax请求

JavaScript+Canvas实现自定义画板

Continuation 在 JS 中的应用「前端篇」

作者:李俊辰 前端之巅

转发链接:https://mp.weixin.qq.com/s/q-49Gf-SFijeu7d2MqztIQ

相关推荐

十字军之王3作弊码有哪些 王国风云3全控制台代码分享

王国风云3作弊码有什么?王国风云3游戏里我们可以使用作弊码来进行游戏,一些特别的玩法是不会少了这方面的内容的。不过具体的作弊码是很多的玩家不清楚的,为了让大家都能用游戏里的作弊码,这里就一起来看看小编...

SpringBoot的Restful的请求路径参数@PathVariable注解的使用

1.介绍1.1介绍大家都知道RESTFul风格的接口的URI路径和普通的接口是不一样的,根据RESTFul的规范请求的URI路径里需要指向一个具体的资源(Resource),这个URI路径里面可以...

Nacos源码—2.Nacos服务注册发现分析四

大纲5.服务发现—服务之间的调用请求链路分析6.服务端如何维护不健康的微服务实例7.服务下线时涉及的处理8.服务注册发现总结7.服务下线时涉及的处理(1)Nacos客户端服务下线的源码(2)Nacos...

JavaScript矩阵快速计算方法(如何用java计算矩阵相乘)

有很多方法可以在JS中表示矩阵数学。有些方法可读性强,有些方法速度快。我想探索一下这些差异。某些技术实际上能为我节省多少时间?为此,我将只研究一个操作:逐元素加法以减少总案例数,但差异操作可能会稍...

如何在前端通过JavaScript创建修改CAD图形

背景在之前的博文CAD图DWG解析WebGIS可视化技术分析总结、CAD_DWG图Web可视化一站式解决方案-唯杰地图-vjmap中讲解了如何把CAD的DWG格式的图纸Web可视化的方案,那在Web前...

如何写一个webpack插件(一)(webpack插件怎么写)

前言最近由于用着html-webpack-plugin觉得很不爽,于是乎想自己动手写一个插件。原以为像gulp插件一样半天上手一天写完,但令人郁闷的是完全找不到相关的文章。一进官方文档却是被吓傻了。首...

如何用Go写一个benchmark 解析器及Web UI 数据可视化?

简介用Go编写的benchmark输出解析器,功能如下读取gotest-bench=.-benchmem的输出文件(如benchmark.txt)解析出每行数据写入成CSV文件...

k8s实践(八):ConfigMap and Secret

一、概述1.ConfigMap在实际的应用部署中,经常需要为各种应用/中间件配置各种参数,如数据库地址、用户名、密码等,而且大多数生产环境中的应用程序配置较为复杂,可能是多个Con...

前端最常用的25个正则表达式,代码效率提高 80%

在日常开发中,正则表达式是非常有用的,正则表达式在每个语言中都是可以使用的,他就跟JSON一样,是通用的。在日常开发中,了解一些常用的正则表达式,能大大提高你的工作效率,例如字符串的匹配表单项的格式校...

游戏《重返德军总部》秘籍代码大全完全版简要分享

重返德军总部这款游戏当中为玩家们带来了很多非常经典熟悉的秘籍作弊码,玩家们可以通过在游戏当中使用这些秘籍作弊码更好的体验到游戏当中的精彩内容,感兴趣的小伙伴就和小编在下面一起来看看吧。重返德军总部秘籍...

32个手写JS,巩固你的JS基础(面试高频)

01.数组扁平化数组扁平化是指将一个多维数组变为一个一维数组constarr=[1,[2,[3,[4,5]]],6];//=>[1,2,3,4,5,6]复制代码...

golang常用数据结构之map详细讲解

概述map是常见的一种数据结构,大部分编程语言都有,用于存储一系列无序的键值对,map也被称为字典或关联数组,顾名思义,键相当于索引,通过键与值形成映射关系,达到快速查找数据的目的。声明和初始化var...

MapStruct 常用的重要注解和方法(mapstruct详解)

MapStruct是一个Java代码生成器,用于简化Java对象之间的映射操作。它通过注解和方法来定义映射规则。以下是MapStruct中常用的重要注解和方法:注解1.@Mapper:用于标记一个接...

Java对象中非空属性一键转Map,让你的代码飞起来

哈喽,大家好,我是木头左!引言在日常开发中,经常会遇到需要将一个Java对象中的非空属性提取出来,放到一个Map中的情况。这样的做法有很多好处,比如方便进行属性的查找、修改等操作,同时也能够提升代码的...

在Kubernetes中使用ConfigMap(kubectl set env)

在《为Kubernetes安装Dashboard》中,我们已经使用VirtualBox安装了CentOS7.9,并在其上安装了Docker20.10.11、Kubernetes1.23.3和ku...