将客户端站点 pug 模板编译成模块

Question

我正在使用 Node.js、Express、Parcel 和 Pug 为网络应用程序提供服务，它们都运行良好。

Parcel 正在将我的 JS 捆绑到一个我非常满意的地步。

然而，我也做了一些客户端模板，而且这只会增加。我目前使用 solution using the pug-cli package (there is also an alternate solution available 使用 pugtalizer 编译 cs pug 模板）；然而，这两种解决方案都使用全局命名空间中的模板函数将 pug 模板编译为 JS，我只能在通过 HTML <script> 标记加载模板函数时访问该模板函数。

这导致我不得不加载多个 JS 文件，这违背了使用 Parcel 将所有 JavaScript 捆绑成一个包的整个尝试。

如何在我的 cs javascript 中导入（即使用 ES6 import()）模板文件以便将其捆绑？

更新

刚刚分析了编译好的模板函数。我重新格式化它，以便更好地分析发生了什么，并在最后向编译的模板文件添加了一个简单的导出命令，如下所示：

module.exports = { exampleTemplate }

然后我可以在我的客户端代码中导入它并像往常一样使用它：

import { exampleTemplate } from '<path>/example'
...
const html = exampleTemplate ({<locals>})
document.getElementByID('target').innerHTML = html

剩下要做的就是以某种方式告诉 Pug 附加 module.exports 语句，我们有一个解决方案...

Answer 1

事实证明 Pug API 开箱即用地支持此功能，pug-cli 也支持。

最后我需要做的就是将我的 package.json 脚本更改为：

package.json

"scripts": {
    ...
    "dev:watch:pug": "pug -O '{module: true}' -c -w --name-after-file -o src/client/views src/client/views",
    ...
}

将客户端站点 pug 模板编译成模块

Compiling client-site pug templates into modules

javascript

parcel

pug