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

カテゴリ フロントエンド

タグ

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

Parcel × PostHTML

HTMLを出力する仕組みに PostHTML というものがある。PostCSSのHTMLバージョンみたいな。

Parcel はこれを、 .posthtmlrc (JSON) ファイルを作るだけで利用できる

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>