如何将 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({});

还有这个 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 和所有其他很酷的东西，并避免所有与解析 JavaScript 相关的 Pug 错误。