EJS

埋め込みJavaScriptテンプレート

インストール

1$ npm install ejs

特徴

制御フロー<% %>
エスケープ出力<%= %>(エスケープ機能は設定可能)
エスケープされていない生の出力<%- %>
-%>終了タグ付きの改行トリムモード (「改行丸呑み」)
制御フロー用のホワイトスペーストリムモード (すべてのホワイトスペースをスラープ)<%_ _%>
<? ?>カスタム区切り文字 (例:の代わりに使用<% %>)
含まれるもの
クライアント側のサポート
中間JavaScriptの静的キャッシュ
テンプレートの静的キャッシュ
エクスプレスビューシステムに対応

例

1
2
3
<% if (user) { %>
  <h2><%= user.name %></h2>
<% } %>

EJS をオンラインで試してください: https://ionicabizau.github.io/ejs-playground/。

使用法

1
2
3
4
5
6
7
8
9
10
let template = ejs.compile(str, options);
template(data);
// => Rendered HTML string

ejs.render(str, data, options);
// => Rendered HTML string

ejs.renderFile(filename, data, options, function(err, str){
    // str => Rendered HTML string
});

すべてを 1 つのオブジェクトで渡すことも可能ですejs.render(dataAndOptions);。その場合、渡されたすべてのオプションにローカル変数を使用することになります。ただし、同じオプションを追加するとコードが壊れる可能性があることに注意してください。 name をデータオブジェクトのプロパティの 1 つとして使用するため、このショートカットの使用はお勧めしません。

オプション

cache コンパイルされた関数はキャッシュされるため、filename
filename レンダリングされているファイルの名前。を使用している場合は不要ですrenderFile()。cacheキーキャッシュとインクルードに使用されます。
root インクルードのプロジェクトルートを絶対パス(/file.ejs)で設定します。
context 関数実行コンテキスト
compileDebugfalseデバッグインストルメンテーションがコンパイルされていない場合
client の場合、EJS ランタイム ( ejs.min.jstrue )をロードする必要なく、ブラウザーでレンダリングできる関数をコンパイルします。
delimiter 開閉に山括弧とともに使用する文字
debug 生成された関数本体を出力する
strict に設定するとtrue、生成された関数は厳密モードになります。
_withwith() {}コンストラクトを使用するかどうか。falseその場合、ローカルはオブジェクトに保存されます。厳密モードでlocals設定します。false
localsNamewithデフォルトを使用しない場合に、ローカル変数を格納するオブジェクトに使用する名前。locals
rmWhitespace 先頭および末尾の空白を含む、削除しても安全な空白をすべて削除します。また、-%>すべてのスクリプトレットタグに対して、より安全なバージョンの行のスラーピングが有効になります (行の途中でタグの新しい行が削除されることはありません)。
escape コンストラクトで使用されるエスケープ関数<%=。レンダリングで使用され、.toString()クライアント関数の生成で使用されます。(デフォルトでは XML をエスケープします)。
outputFunctionName 関数の文字列 (「echo」や「print」など) に設定すると、スクリプトレットタグ内の出力が印刷されます。

このプロジェクトはJSDocを使用します。完全なパブリック API ドキュメントについては、リポジトリを複製してを実行しますnpm run doc。これにより、適切なオプションを指定して JSDoc が実行され、ドキュメントがに出力されますout/。パブリック API ドキュメントとプライベート API ドキュメントの両方が必要な場合は、npm run devdoc代わりに実行してください。

含まれるもの

インクルードは絶対パスである必要がありますが、そうでない場合は、呼び出しでテンプレートに対する相対パスであるとみなされます。たとえば、 from からincludeインクルードする場合は、を使用します。./views/user/show.ejs./views/users.ejs<%- include('user/show') %>

を使用しない場合は、呼び出しfilenameでテンプレートのオプションを指定する必要があります。includerenderFile()

<%-HTML 出力の二重エスケープを避けるために、インクルードで生の出力タグ ( ) を使用することをお勧めします。

1
2
3
4
5
<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}) %>
  <% }); %>
</ul>

インクルードは実行時に挿入されるため、呼び出しのパスに変数を使用できます include(例: <%- include(somePath) %>)。トップレベルのデータオブジェクトの変数はすべてのインクルードで使用できますが、ローカル変数は受け渡す必要があります。

注: インクルードプリプロセッサディレクティブ ( <% include user/show %>) は引き続きサポートされています。

カスタム区切り文字

カスタム区切り文字は、テンプレートごとに、またはグローバルに適用できます。

1
2
3
4
5
6
7
8
9
10
11
let ejs = require('ejs'),
    users = ['geddy', 'neil', 'alex'];

// Just one template
ejs.render('<?= users.join(" | "); ?>', {users: users}, {delimiter: '?'});
// => 'geddy | neil | alex'

// Or globally
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', {users: users});
// => 'geddy | neil | alex'

キャッシング

lru-cacheEJS には、テンプレートのレンダリングに使用される中間 JavaScript 関数をキャッシュするための基本的なインプロセスキャッシュが付属しています。Node のライブラリを使用すると、LRU キャッシュを簡単にプラグインできます。

1
2
3
let ejs = require('ejs'),
    LRU = require('lru-cache');
ejs.cache = LRU(100); // LRU cache with 100-item limit

EJS キャッシュをクリアしたい場合は、を呼び出しますejs.clearCache。LRU キャッシュを使用していて別の制限が必要な場合は、ejs.cacheLRU の新しいインスタンスに単純にリセットします。

カスタムファイルローダー

デフォルトのファイルローダーはですfs.readFileSync。カスタマイズしたい場合は、ejs.fileLoader を設定できます。

1
2
3
4
5
6
let ejs = require('ejs');
let myFileLoad = function (filePath) {
  return 'myFileLoad: ' + fs.readFileSync(filePath);
};

ejs.fileLoader = myFileLoad;

この機能を使用すると、テンプレートを読み取る前に前処理を行うことができます。

レイアウト

EJS は特にブロックをサポートしていませんが、次のようにヘッダーとフッターを含めることでレイアウトを実装できます。

1
2
3
4
5
6
7
8
<%- include('header') -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer') -%>

クライアント側のサポート

最新リリースに移動し、ダウンロードする ./ejs.jsか./ejs.min.js、または、リポジトリのクローンを作成して実行することで、自分でコンパイルすることもできますjake build(または、$(npm bin)/jake buildJake がグローバルにインストールされていない場合)。

これらのファイルの 1 つをページに含めると、ejs世界中で利用できるようになります。

Example

1
2
3
4
5
6
7
8
9
10
<div id="output"></div>
<script src="ejs.min.js"></script>
<script>
  let people = ['geddy', 'neil', 'alex'],
      html = ejs.render('<%= people.join(", "); %>', {people: people});
  // With jQuery:
  $('#output').html(html);
  // Vanilla JS:
  document.getElementById('output').innerHTML = html;
</script>

Caveats

EJS のほとんどは期待どおりに動作しますが、注意すべき点がいくつかあります。

Obviously、ファイルシステムにアクセスできないため、ejs.renderFile()機能しません。

同じ理由で、includeを使用しない限り、は機能しませんinclude callback。例を次に示します。

1
2
3
4
5
6
7
8
9
let str = "Hello <%= include('file', {person: 'John'}); %>",
   fn = ejs.compile(str, {client: true});

fn(data, null, function(path, d){ // include callback
 // path -> 'file'
 // d -> {person: 'John'}
 // Put your code here
 // Return the contents of file as a string
}); // returns rendered string

IDE Integration with Syntax Highlighting

VSCode:Javascript EJS by DigitalBrainstem

EJS の実装は多数あります。

TJ の実装、このライブラリの v1: https://github.com/tj/ejs
ジュピターコンサルティングの EJS: http://www.embeddedjs.com/
Google コード上の EJS 埋め込み JavaScript フレームワーク: https://code.google.com/p/embeddedjavascript/
Sam Stephenson の Ruby 実装: https://rubygems.org/gems/ejs
Erubis、JavaScript も実行する ERB 実装: http://www.kumata-lab.com/erubis/users-guide.04.html#lang-javascript
DigitalBrainstem EJS 言語サポート: https://github.com/Digitalbrainstem/ejs-grammar

ライセンス

Apache License、バージョン 2.0 ( http://www.apache.org/licenses/LICENSE-2.0 )に基づいてライセンス供与されています。

EJS 埋め込み JavaScript テンプレートの著作権は 2112 mde@fleegix.org にあります。

開発ガイド

基本モジュール

組み込みオブジェクト

コミュニティモジュール

EJS

インストール

特徴

例

使用法

オプション

タグ

含まれるもの

カスタム区切り文字

キャッシング

カスタムファイルローダー

レイアウト

クライアント側のサポート

Example

Caveats

IDE Integration with Syntax Highlighting

ライセンス

開発ガイド

基本モジュール

組み込みオブジェクト

コミュニティモジュール

EJS

インストール

特徴

例

使用法

オプション

タグ

含まれるもの

カスタム区切り文字

キャッシング

カスタムファイルローダー

レイアウト

クライアント側のサポート

Example

Caveats

IDE Integration with Syntax Highlighting

関連プロジェクト

ライセンス