Question

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

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

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

然而，这个解决方案对于我想要的东西看起来有点过分。此外，它似乎不再维护ezel项目，它在2年内没有更新，它仍然使用玉（npm给了我很多错误）。

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

我的问题是依赖于： https://pugjs.org/js/pug.js 并且需要在浏览器中执行（＆＃39; pug＆＃39;）。我已经安装了帕格作为我的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文件夹中。任务正在后台运行，监视views / client /中的更改。更改后，它将来自views / client /文件夹的.pug文件符合javascript并将其保存到public / js / views /中。然后在客户端代码中，您只需在您的js中包含Template.js并调用Template（参数）。客户端不需要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年拥有各种捆绑工具，所以看起来有点过于简单了。 / p>

使用nodejs和pug

2 个答案: