ejsとは？
JavaScriptのテンプレートエンジンです。
メリット
サイトの共通パーツなどを使いたい場合は従来はPHPやRailsなどを使わないとダメだったのですが、JSだけで分割することができます。
また、JSONファイルなどを用意して外部から固定値を読み込ませるなどの用途にも使えます。
インストール
|
1 2 |
npm init -y npm i -D ejs-cli |
html
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>タイトル</title> <% var hoge = '<p>hello, World</p>' %> </head> <body> <%- hoge %> </body> </html> |
package.json
以下のコマンドを記述します。
|
1 2 3 |
"scripts": { "ejs": "ejs-cli --base-dir ejs/ 'index.ejs' --out dest/" } |
| オプション名 | 説明 |
|---|---|
| –base-dir | コンパイルするファイルの参照先 |
| –out | 出力先 出力ファイル名 |
| -e | コンパイル、出力が不要なディレクトリです。（例えば、includeすることが前提のファイルとかであればここに指定します。） |
| -O | もしJSONファイルを読み込ませてHTMLに値を埋め込みたい場合などに使えます。 |
この記事へのコメントはありません。