javascript - 使用 nodejs 和 pug 的客户端模板

Question

我有一个正在构建的网络应用程序，它具有在客户端构建的动态小部件。目前我使用 nodejs 和 pug 作为我的服务器端模板库，我喜欢 pug 的简单性。

我想在服务器上有一系列小的 pug 文件，客户端可以将其用作构造 block 来构建用户所需的小部件。

我尝试使用此处找到的先前解决方案: client side server side templating nodejs

但是，对于我想要的，该解决方案看起来有点矫枉过正。而且，看起来 ezel 项目不再维护，它已经 2 年没有更新了，它仍然使用 jade(npm 给了我很多错误)。

我只想能够在浏览器中用 pug 构建我的动态小部件。这个页面似乎正是我想要的: https://pugjs.org/api/reference.html特别是 pug.renderFile('path/to/file.pug', options);功能似乎正是我想用来动态构建我的小部件的功能(用户拥有对如何构建/显示小部件的所有控制，因此浏览器需要动态构建 html View )

我的问题是依赖于: https://pugjs.org/js/pug.js并且需要在浏览器中执行 require('pug') 。我已经将 pug 安装为我的 package.json 的一部分。有没有更强大的方法直接获取 pug.js？我对 Web 开发还是个新手，我的背景是 C++/Java，所以我不确定直接在浏览器中使用 pug.js 是最好的解决方案还是有更好的标准解决方案。我发布的 stackoverflow 问题是我遇到的唯一一个远程相似的帖子。

Answer 1

我研究并测试了一个我真正喜欢的解决方案。 NPM 有一个很酷的包，叫做 pug-cli。

https://www.npmjs.com/package/pug-cli

我修改了我的 npm 启动脚本以执行以下操作:

pug -c -w --name-after-file -o public/js/views views/client/

这允许我做的是将我的客户 View 写入 views/client 文件夹中。一个任务在后台运行，监视 views/client/中的变化。更改后，它会将 views/client/文件夹中的 .pug 文件编译成 javascript，并将其保存到 public/js/views/中。然后在客户端代码中，您只需包含 Template.js 并在您的 js 中调用 Template(parameters)。客户端不需要 pug.js。这是带调试的，要关闭调试，用-D运行

例如，views/client/example.pug 将自动编译为 public/js/views/exampleTemplate.js然后，您在客户端中要做的就是包含此 js 文件，并调用 exampleTemplate(params) 来获取您的模板化字符串(您可以使用不同的参数任意调用它以获得不同的 View )。当服务器端的 View 未知时，这允许我从客户端任意/动态地组合和构造 View 。

我喜欢这种工作流程方法，但我愿意接受更好的建议。