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

Question

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

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

我尝试使用此处找到的先前解决方案： 客户端服务器端模板化nodejs

但是，该解决方案对于我想要的东西来说似乎有些矫kill过正。 而且，看起来ezel项目不再维护，它在2年内没有更新，并且仍然使用玉器（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.js？ 我仍然是Web开发的新手，我的背景是C ++ / Java，所以我不确定完全在浏览器中直接使用pug.js是最好的解决方案还是有更好的标准解决方案。 我发布的stackoverflow问题是我遇到的唯一远程相似的帖子。

Answer 1

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

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

我修改了npm start脚本以执行以下操作：

pug -c -w --name-after-file -o public/js/views 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）来获取模板化字符串（您可以使用不同的参数任意调用此方法以获得不同的视图）。 当服务器端的视图未知时，这使我能够从客户端任意/动态地组合和构造视图。

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

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模块并通过汇总备份捆绑软件）

如果使用browserify：

https://www.npmjs.com/package/jadeify （从未尝试过）

pug-cli也具有-c键，因此您可以如上所述运行任何观察器并生成js文件，但是由于我们现在在2017年提供了多种捆绑工具，因此似乎有点太简单了。