如何将 JavaScript 函数添加到 Pug 模板

Question

将 JavaScipt 添加到 Pug 模板存在许多问题，包括：

• PugJS 会在许多完全有效的 JavaScript 函数上引发异常。
• 当您的 JavaScript 函数存在语法错误时，系统不会为您识别这些错误。
• 您无法在 Pug 模板内的 JavaScript 函数中设置断点
• 您不能使用 Typescript 来帮助提高稳健性

在 Pug 中使用 JavaSript 函数的首选/推荐方式是什么？

Answer 1

我在这些问题上挣扎了一段时间，然后才意识到还有更好的选择。我建议将 JavaScript 函数传递给 Pug 渲染函数，而不是将它们构建到模板中。

我之前做的就是这个 JavaScript

const render = pug.compileFile(path.join(__dirname, '../templates/sandbox.pug'));
const html = render({});

和这个哈巴狗模板

- var testFunc = function(){
-     return "Test func";
-   }

div #{testFunc()} worked!

实现相同目标的更好方法是使用 JavaScript

- var testFunc = function(){
-     return "Test func";
-   }

div #{testFunc()} worked!

和这个哈巴狗模板

div #{testFunc()} worked!

这允许您设置断点、使用 Typescript 和所有其他很酷的东西，并避免与解析 JavaScript 相关的所有 Pug 错误。