如何向 Pug 模板添加 JavaScript 函数

Question

将 JavaScipt 添加到 Pug 模板有很多问题，包括：

PugJS 在许多 JavaScript 完全有效的函数上抛出异常。
当您的 JavaScript 函数有语法错误时，它们不会为您识别。
您不能在 Pug 模板中的 JavaScript 函数中设置断点
您不能使用 Typescript 来帮助提高稳健性

在 Pug 中使用 JavaSript 函数的 preferred/recommended 方法是什么？

Answer 1

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

我之前做的是这个JavaScript

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

和这个 Pug 模板

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

div #{testFunc()} worked!

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

const render = pug.compileFile(path.join(__dirname, '../templates/sandbox.pug'));
const html = render({
  testFunc: function(){
    return "Test func";
  }
});

和这个 Pug 模板

div #{testFunc()} worked!

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

如何向 Pug 模板添加 JavaScript 函数

How to add JavaScript functions to a Pug template

javascript

pug