概要

npm run実行時に渡された引数をHTML内に埋め込む方法です。
今回はHTMLテンプレートエンジンであるEJSを使用します。

手順

今回は以下のHTML内の<%= foo %>部分をnpm run実行時に渡された引数で置換します。

index.ejs

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <p>本日は<%= foo %>なり</p>
  </body>
</html>

EJSのインストール＆ejsファイル作成

以下のコマンドでEJSをインストールします。

npm install ejs

続いて、テンプレートファイルとなるEJSファイルを作成します。
今回はindex.ejsというファイル名にします。

index.ejs

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <p>本日は<%= foo %>なり</p>
  </body>
</html>

scripts部分へビルドコマンドを登録する

EJSを使用して、EJSファイルをからHTMLファイルを生成するためのビルドコマンドをpackage.jsonのscripts部分に定義しておきます。
今回はbuildとしておきます。

package.json

"scripts": {
    "build": "ejs ./index.ejs -o ./index.html foo=${npm_config_bar}",
}

${npm_config_〇〇}と定義しておくと、npm run実行時に--〇〇=△△を引数として渡すことで${npm_config_〇〇}の部分が△△に置き換わります。
Windows環境の場合、${npm_config_bar}を%npm_config_bar%に変更してください。

HTML生成

それではnpm run build --bar=晴天を実行しましょう。このコマンドを実行することで、ejs ./index.ejs -o ./dist/index.html foo=晴天が実行されます。
実行が終了したら、生成されたHTMLを見てみましょう。

index.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <p>本日は晴天なり</p>
  </body>
</html>

<%= foo %>の部分が晴天に置き換わっていたらOKです。

おわりに

以上がテンプレートエンジンであるEJSを使用したnpm run実行時の引数をHTMLに埋め込む方法でした。
「もっと簡単にnpm run実行時の引数をHTMLに埋め込む方法があるよ～」という方がいらっしゃれば、コメントで紹介いただければ嬉しいです。

参考文献