网站首页 > 技术文章正文

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

ins518 2025-05-22 10:56:20 技术文章 3 ℃ 0 评论

作者：李俊辰前端之巅

转发链接：
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 一起使用，因为关闭标签会浪费太多行代码。