うさぎのメモ帳

ParcelでHTMLファイルのインクルード/インポートを行う

2019年06月27日 - 2019年09月22日

HTMLのヘッダーなどの共通項目をひとつにまとめたかったので。

Parcel × PostHTML

HTMLを出力する仕組みに PostHTML というものがあります。PostCSSのHTMLバージョンみたいな感じです。
Parcel はこれを、.posthtmlrc(JSON) ファイルを作るだけで利用できます

.posthtmlrc.js,posthtml.config.jsでも可

posthtml-import を取得

HTMLのインポートには posthtml-include を使います。
似たようなパッケージに posthtml-import がありましたが、GitHub でのバッジと人気度から判断して利用しませんでした。

yarn add -D posthtml-include

.posthtmlrcを作る

ファイル名は間違えないように ポストHTMLrc と口ずさみながら打ち込みます。

.posthtmlrc

{
  "plugins": {
    "posthtml-include": {
      "root": "./src"
    }
  }
}

<include>タグでインクルード

別のHTMLファイルをインクルードできるようになりました。

<include src="./partials/header-content.html"></include>