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

Question

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

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

我尝试使用以前在此处找到的解决方案： 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 视图）

我的问题是依赖于： 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/

这允许我将我的客户端视图写入视图/客户端文件夹中。一个任务在后台运行，监控views/client/的变化。更改后，它将 view/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)来获取你的模板化字符串（你可以任意调用它，不同的参数得到不同的视图）。当视图在服务器端未知时，这允许我从客户端任意/动态地组合和构造视图。

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

Answer 2

如果你使用 webpack：

https://github.com/pugjs/pug-loader 和 https://github.com/willyelm/pug-html-loader服务好。

在汇总的情况下：

https://www.npmjs.com/package/rollup-plugin-pug + https://www.npmjs.com/package/rollup-plugin-pug-html 似乎是一个不错的解决方案（目前正在测试它的工作原理，我们现在正在尝试使用原生 es6 模块并使用汇总备份包）

在浏览器化的情况下：

https://www.npmjs.com/package/jadeify（没试过）

pug-cli 也有 -c 键，所以你可以像上面提到的那样运行任何 watcher 并生成 js 文件，但这似乎有点太简单了，因为我们现在在 2017 年有了各种捆绑工具。