时间戳

首页 > 解决方案 > 将客户端 pug 模板编译成模块

javascript - 将客户端 pug 模板编译成模块

问题描述

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

Parcel 将我的 JS 捆绑到了我非常满意的地步。

但是，我也做了一些客户端模板，而且只会增加。我目前使用 pug-cli 包使用这个解决方案编译 cs pug 模板（这里还有一个使用 pugtalizer 的替代解决方案）；但是，任何一种解决方案都使用全局命名空间中的模板函数将 pug 模板编译为 JS，我只能在通过 HTML<script>标记加载模板函数时访问该模板函数。

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

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

更新

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

module.exports = { exampleTemplate }

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

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

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

标签： javascriptpugparcel

解决方案

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

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

包.json

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

推荐阅读