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

标签 javascript node.js pug

我有一个正在构建的网络应用程序,它具有在客户端构建的动态小部件。目前我使用 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 问题是我遇到的唯一一个远程相似的帖子。

最佳答案

我研究并测试了一个我真正喜欢的解决方案。 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 。

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

关于javascript - 使用 nodejs 和 pug 的客户端模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43025557/

相关文章:

javascript - 使用 jPlayer 自动播放音频

mysql - nodejs mysql查询仅显示一条记录而不是数据库中的所有记录

javascript - 如何在不登录的情况下为每个用户存储不同的(随机和临时)后端数据?

javascript - 当源文件夹中有多个jade文件时,gulp-jade仅构建一个HTML文件

node.js - 在 Jade 中添加页脚或其他部分

javascript - 在现有代码上实现新的图像叠加(HTML5 和 CSS 3)

javascript - 使用 JQuery 或 Javascript,如何绑定(bind)点击函数来控制元素/div 的滚动?

node.js - express和jade怎么能不压缩html呢?

javascript - 在矩形内画对 Angular 线

mysql - Sequelize 填充连接表属性