Corredor

ウェブ、プログラミングの勉強メモ。

template-html を Fork してオレオレ HTML ジェネレータを作った

いまから始めるWebフロントエンド開発

いまから始めるWebフロントエンド開発

template-html という npm パッケージがある。テンプレートとなる HTML と、それにバインディングしたいソースを持つ HTML とを指定すると、テンプレート HTML 内に指定のソースをバインディングした HTML を生成してくれる。

使用例

コードとしてはこんな感じ。

<!-- template.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title><!-- build:title --></title>
  </head>
  <body>
    <div><!-- build:content --></div>
  </body>
</html>

これがテンプレート側。一方、値を持つ方はこんな風に作る。

<!-- content.html -->

<!-- build:title -->ページタイトル<!-- /build:title -->
<!-- build:content -->
<h1>コンテンツ</h1>
<p>本文</p>
<!-- /build:content -->

これを以下のようなコマンドで実行する。

$ template-html content.html -t template.html -o dist

すると、dist/content.html というファイルが生成されており、以下のような HTML になっている。

<!-- dist/content.html -->

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>ページタイトル</title>
  </head>
  <body>
    <div>
<h1>コンテンツ</h1>
<p>本文</p>
</div>
  </body>
</html>

このように、template.html のコメント部分と対応する content.html のコメントを判別し、そのコメントで囲まれた内容が取り込まれている。

これを Fork した

1つのテンプレート HTML ファイルを色んな HTML に適用することができるこの npm パッケージ、望んていだとおりのものなのだが、少し気に入らないところがあった。

  • テンプレートの書き方が HTML コメントなのが嫌… (なんとなく)。
  • build: といった余計なタグを書いてあげないといけないっぽい (設定で無効にできるようだがそもそも要らないので…)。

ということで、

  • テンプレート部分を {{ hoge }} という二重ブレースで書けるようにする
  • build: などのタグを求めず、オプションごと削除する。

ということをやってみようと思い、npm パッケージを Fork して公開してみた。

npmjs のページは以下。

ソースコードは GitHub にて公開中。

npm パッケージ公開までの道のり

やったことは以下のとおり。

  1. template-html の GitHub リポジトリを Fork する
  2. コードを修正して思いどおりのコードにする
  3. package.json を修正して新たなパッケージ名で公開できるようにする
  4. npm publish --access=public する

手順 1. は本当に GitHub で Fork するだけ。

を Fork して

を作った。

次にコード修正。さいわい構成ファイルは実質1ファイルだったので、index.js を読解して、文字列を replace() している箇所を見つけていじった。

cli.jsbin/template-html は CLI 部分。実際の処理は index.js がやるワケだが、オプション引数を解釈したりとかしているのがココ。要らないオプションができたのでその記述を削除した。

ついでにテストも書いてみたが、tape というテストツールは手軽で良いね。

出来上がったら package.jsonname プロパティを @neos21/template-html に変更。これで別名でパッケージを公開できる。

最後に npm publish --access=public で公開。スコープパッケージ名にしている場合は --access オプションが必要。

README.md に npm バージョンを表示するバッジを作ったが、以下のようなコードで実現できる。

[![NPM Version](https://img.shields.io/npm/v/@neos21/template-html.svg)](https://www.npmjs.com/package/@neos21/template-html)

[![NPM Version](https://img.shields.io/npm/v/【スコープ名】/【パッケージ名】.svg)](https://www.npmjs.com/package/【スコープ名】/【パッケージ名】)