概要
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に埋め込む方法があるよ～」という方がいらっしゃれば、コメントで紹介いただければ嬉しいです。