素晴らしいコミュニティモジュール

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代わりに実行してください。

タグ

  • <% 「Scriptlet」タグ、制御フロー用、出力なし
  • <%_ 「Whitespace Slurping」スクリプトレット タグは、その前の空白をすべて削除します
  • <%= 値をテンプレートに出力します(エスケープ)
  • <%- エスケープされていない値をテンプレートに出力します
  • <%# コメントタグ、実行なし、出力なし
  • <%% リテラル「<%」を出力します。
  • %%> リテラル「%>」を出力します。
  • %> プレーンな終了タグ
  • -%> Trim-mode ('newline slurp') タグ、改行に続く部分をトリミング
  • _%> 「Whitespace Slurping」終了タグ、その後にあるすべての空白を削除します

完全な構文ドキュメントについては、次を参照してください。docs/syntax.md

含まれるもの

インクルードは絶対パスである必要がありますが、そうでない場合は、呼び出しでテンプレートに対する相対パスであるとみなされます。たとえば、 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 のほとんどは期待どおりに動作しますが、注意すべき点がいくつかあります。

  1. Obviously、ファイルシステムにアクセスできないため、ejs.renderFile()機能しません。
  2. 同じ理由で、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 の実装は多数あります。

ライセンス

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


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