Parcel 與 Pug

Pug

支持?jǐn)U展類型: jade, pug

使用 Pug 很容易，這里提供幾個(gè)簡單的例子作為一點(diǎn)參考。

例 1 - Just index.pug

假設(shè)如下文件結(jié)構(gòu)：

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

使用 Parcel 命令運(yùn)行起來：parcel src/index.pug

例 2 - index.pug, index.js and style.css

假設(shè)如下文件結(jié)構(gòu)：

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

在 index.pug 內(nèi)，像往常一樣寫入樣式和 js。

// index.pug

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

    script(src="index.js")

以同樣的方式使用 Stylus, Sass or LESS，把樣式導(dǎo)入到 js 文件內(nèi)。

例 3 - Pug with locals

假設(shè)如下文件結(jié)構(gòu)：

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

我們需要從pug.config.js 文件導(dǎo)出 locals對(duì)象，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}

接著，使用命令運(yùn)行起來：parcel src/index.pug

更新 locals 對(duì)象需要重新執(zhí)行 parcel

如果更新了locals對(duì)象，請(qǐng)關(guān)閉 parcel 進(jìn)程并重新執(zhí)行 parcel src/index.pug。

注意無聲的錯(cuò)誤

當(dāng)使用 locals 設(shè)置時(shí)，在 Pug 中使用一個(gè)不存在的插值（interpolation）將不會(huì)收到任何錯(cuò)誤告警。

假設(shè)，我們寫了h1 #{thing}并且在 locals 對(duì)象中不存在thing 屬性，Parcel 不會(huì)暫停并報(bào)告任何錯(cuò)誤。你只是在瀏覽器看到空的結(jié)果。因此，確保有一個(gè)正確的配置，否則插值（interpolation）不運(yùn)行也不知道什么問題。

三種類型的配置文件

可以使用.pugrc 或 .pugrc.js來代替pug.config.js。但只有這三個(gè)文件可以設(shè)置 locals。

不能在 pug.config.js 文件中使用 import 語句

若要在pug.config.js中導(dǎo)入其他文件，請(qǐng)使用 require 語句。

// pug.config.js

const data = require('./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自動(dòng)打開瀏覽器，執(zhí)行npm run build生產(chǎn)環(huán)境打包。