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

Question

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.

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.

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

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).

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)

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.

Answer 1

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

I modified my npm start script to do the following:

pug -c -w --name-after-file -o public/js/views views/client/

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

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.

Answer 2

If you use webpack:

https://github.com/pugjs/pug-loader and https://github.com/willyelm/pug-html-loader serve well.

In case of rollup:

https://www.npmjs.com/package/rollup-plugin-pug + https://www.npmjs.com/package/rollup-plugin-pug-html seem to be good solution (currently testing how it works, we are now experimenting with native es6 modules and backuping bundles with rollup)

In case of browserify:

https://www.npmjs.com/package/jadeify (never have tried)

Also pug-cli have got -c key, so you can just run any watcher and generate js files as mentioned above, but it seems to be bit too straightforward since we've got variety of bundling tools now in 2017.