使用 nodejs 和 pug 进行客户端模板化

Question

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

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

我尝试使用这里找到的以前的解决方案： 客户端服务器端模板 nodejs

但是，该解决方案对于我想要的东西来说似乎有点过分。而且，ezel项目好像已经不再维护了，2年没更新了，还在用jade（npm给了我很多错误）。

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

我的问题是依赖于：https : //pugjs.org/js/pug.js 并且需要在浏览器中执行 require('pug') 。我已经在 package.json 中安装了 pug。有没有更健壮的方式直接获取 pug.js？我仍然是 Web 开发的新手，我的背景是 C++/Java，所以我不完全确定直接在浏览器中使用 pug.js 是否是最好的解决方案，或者是否有更好的标准解决方案。我发布的 stackoverflow 问题是我遇到的唯一一个与此相似的帖子。

Answer 1

I researched and tested a solution that I really like. NPM has a cool package called pug-cli.

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

I modified my npm start script to do the following:

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

这允许我做的是将我的客户端视图写入 view/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) 来获取模板化字符串（你可以任意调用它，不同的参数会得到不同的视图）。当服务器端的视图未知时，这允许我从客户端任意/动态地组合和构造视图。

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