Pug

Pug 是一种编译为 HTML 的模板语言。Parcel 通过 @parcel/transformer-pug 插件自动支持 Pug。当检测到 .pug 文件时，它将自动安装到您的项目中。

Pug 被编译为 HTML 并按照 HTML 文档中描述的方式进行处理。

使用示例

doctype html
html(lang="en")
  head
    link(rel="stylesheet", href="style.css")
  body
    h1 你好，Pug！
    p.
      Pug 是一种简洁且简单的模板语言，
      专注于性能和强大的功能。
    script(type="module", src="index.js")

Pug 可以像 HTML 一样作为 Parcel 的入口：

parcel index.pug

Pug 也可以在允许 URL 的任何地方引用，例如在 HTML 文件中或从 JS 文件中。要将编译后的 HTML 内联到 JavaScript 文件中，请使用 bundle-text: 方案。详情请参见捆绑内联。

import html from "bundle-text:./index.pug";

document.body.innerHTML = html;

配置

可以使用 .pugrc、.pugrc.js、.pugrc.mjs、.pugrc.cjs、pug.config.js、pug.config.mjs 或 pug.config.cjs 文件配置 Pug。有关可用选项的详细信息，请参见 Pug API 参考。

本地变量

您可以在 Pug 配置中定义一个 locals 对象，这将在渲染 Pug 模板时提供给模板。

h1 你好，#{name}！

{
  "locals": {
    "name": "Puggy"
  }
}