使用nodejs和pug进行客户端模板 [英] Client-Side templating with nodejs and pug

问题描述

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

I have a web app that I'm building that has dynamic widgets being constructed on the client-side. Currently I am using nodejs and pug as my server side templating library, and I like the simplicity of pug.

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

I would like to have a series of small pug files on the server that the client side can use as building blocks to construct the user desired widget.

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

I tried using a previous solution found here: client side server side templating nodejs

但是，该解决方案对于我想要的东西来说似乎有些过头了.而且，看起来ezel项目不再维护，它已经有两年没有更新了，它仍然使用玉(npm给我带来很多错误).

However, that solution looks like overkill for what I want. Moreover, it looks like the ezel project is no longer maintained, it hasn't been updated in 2 years and it still uses jade (which npm gives me a lot of errors).

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

I just want to be able to construct my dynamic widgets in pug in the browser. This page seems to have exactly what I want: https://pugjs.org/api/reference.html Specifically the pug.renderFile('path/to/file.pug', options); function seems like exactly what I want to use to dynamically build my widgets (the user has all the controls on how the widgets are constructed/displayed, so the browser needs to dynamically construct the html views)

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

My issue is the dependence on: https://pugjs.org/js/pug.js And the need to do require('pug') in the browser. I already have pug installed as part of my package.json. Is there a more robust way of getting pug.js directly? I am still new to web development, my background is in C++/Java, so I'm not entirely sure if using pug.js in the browser directly is the best solution or if there are better standard solution. The stackoverflow question I posted is the only post I came across that is remotely similar.

推荐答案

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

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

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

I modified my npm start script to do the following:

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

What this allows me to do is write my client views in put in the views/client folder. A task is running in the background that monitors changes in views/client/. Upon changes, it complies .pug files from views/client/ folder into javascript and saves it into public/js/views/. Then in the client code you just include Template.js and call Template(parameters) in your js. There is no need for a pug.js on client side. This is with debugging, to turn debug off, run with -D

例如，views/client/example.pug将自动符合public/js/views/exampleTemplate.js然后，您在客户端要做的就是包含这个js文件，并调用exampleTemplate(params)来获取模板化的字符串(您可以使用不同的参数任意调用此参数以获取不同的视图).当服务器端的视图未知时，这使我能够从客户端任意/动态地组合和构造视图.

For instance, views/client/example.pug will get automatically complied to public/js/views/exampleTemplate.js Then all you have to do in the client is include this js file, and call exampleTemplate(params) to get your templated string (you can call this arbitrarily with different parameters get different views). This allows me to arbitrarily/dynamically compose and construct views from the client, when the views are unknown on the server side.

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

I like this approach for my workflow, but I am open to better suggestions.

这篇关于使用nodejs和pug进行客户端模板的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！