将客户端 pug 模板编译成模块答案

【问题标题】：Compiling client-site pug templates into modules将客户端 pug 模板编译成模块
【发布时间】：2020-11-02 11:42:53
【问题描述】：

我正在使用 Node.js、Express、Parcel 和 Pug 提供一个 Web 应用程序，它运行良好。

Parcel 将我的 JS 捆绑到我非常满意的程度。

不过，我也做了一些客户端模板，而且只会增加。我目前使用 pug-cli 包使用this 解决方案编译 cs pug 模板（还有一个替代解决方案可用here 使用 pugtalizer）；但是，任何一种解决方案都将 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 语句，我们有一个解决方案...

【问题讨论】：

标签： javascript pug parcel

【解决方案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",
    ...
}

【讨论】：