Question

支援的副档名：jade 及 pug

Pug 的设定相当容易，你可以使用任一种的档案结构。下列提供数个範例供参考。

範例 1：仅 index.pug

假设我们有下列的档案结构：

.
├── package.json
└── src
    └── index.pug

我们可以这样执行 Parcel：parcel src/index.pug。

範例 2：index.pug、index.js 及 style.css

假设我们有下列的档案结构：

.
├── package.json
└── src
    ├── index.js
    ├── index.pug
    └── style.css

然后像平常一样在 index.pug 中写些样式及 JS：

// index.pug

doctype html
html(lang="")
  head
    // ...
    link(rel="stylesheet", href="index.css")
  body
    h1 Hello

    script(src="index.js")

Stylus、Sass 或 LESS 也是使用一样的方法。如果你喜欢的话，你也可以把样式档汇入你的 JS 里。

接着使用一样的指令执行 Parcel：parcel src/index.pug。

範例 3：Pug 与 locals

假设我们有下列档案结构：

.
├── package.json
└── src
    ├── index.pug
    └── pug.config.js

现在我们需要从 pug.config.js 汇出一个 locals 物件。

pug.config.js 必须与 index.pug 或是 package.json 位于同一目录。

// pug.config.js

module.exports = {
  locals: {
    hello: "world"
  }
};

// index.pug

doctype html
html(lang="")
  head
    // ...
  body
    h1 #{hello}

    script(src="index.js")

接着以同样的指令执行 Parcel：parcel src/index.pug。

更新 locals 物件后需重新执行 Parcel

我们无法即时看到 locals 物件的更动，修改此物件后请手动重新执行 parcel src/index.pug。

注意无声的错误

如果你依照上面的设定，并在 Pug 中使用不存在的插值（interpolation）将不会有任何错误讯息。

假设我们写了 h1 #{thing}，但 thing 并不存在于 locals，这时 Parcel 不会当掉也不会有错误讯息，只会在浏览器中显示一片空白。

因此请确保所有东西都是正确的，否则插值无法运作时你将无从得知。

设定档仅可使用三种档名

你可以使用 .pugrc 或 .pugrc.js 来替代 pug.config.js，只有这三个档名可用来设定 locals。

pug.config.js 中无法使用 import 语法

若你想汇入其他档案至 pug.config.js 中，你必须使用 require 语法。

下列範例可以正常执行：

// pug.config.js

const data = require("./data.js");

module.exports = {
  locals: {
    d: data
  }
};

这样则无法运作：

import data from "./data.js";

module.exports = {
  locals: {
    d: data
  }
};

将脚本加入 package.json

"scripts": {
    "dev": "parcel src/index.pug",
    "devopen": "parcel src/index.pug --open 'google chrome'",
    "build": "parcel build src/index.pug"
  },

使用 npm run devopen 可以在浏览器中开启专案，执行 npm run build 则可产生正式环境的编译。