EJS

내장된 JavaScript 템플릿

설치

1$ npm install ejs

특징

제어 흐름<% %>
이스케이프 출력 <%= %>(이스케이프 기능 구성 가능)
이스케이프되지 않은 원시 출력<%- %>
-%>종료 태그 가 있는 줄바꿈 트림 모드('줄바꿈 소리 지르기')
제어 흐름을 위한 공백 제거 모드(모든 공백 제거)<%_ _%>
맞춤 구분 기호(예: <? ?>대신 사용 <% %>)
포함
클라이언트 측 지원
중간 JavaScript의 정적 캐싱
템플릿의 정적 캐싱
Express 뷰 시스템 준수

예

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

https://ionicabizau.github.io/ejs-playground/ 에서 온라인으로 EJS를 사용해 보세요 .

용법

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
});

단일 개체에 모든 것을 전달하는 경우 에도 사용할 수 있습니다 ejs.render(dataAndOptions);. 이 경우 전달된 모든 옵션에 대한 로컬 변수가 생성됩니다. 그러나 동일한 옵션을 추가하면 코드가 깨질 수 있다는 점에 유의하세요. 이름을 데이터 개체의 속성 중 하나로 지정하므로 이 바로가기를 사용하지 않는 것이 좋습니다.

옵션

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 문서를 모두 원하는 경우 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'

캐싱

EJS는 템플릿을 렌더링하는 데 사용되는 중간 JavaScript 기능을 캐싱하기 위한 기본 프로세스 내 캐시와 함께 제공됩니다. Node의 라이브러리를 사용하여 LRU 캐싱을 쉽게 연결할 수 있습니다 lru-cache.

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

EJS 캐시를 지우려면 을 호출하고, ejs.clearCacheLRU 캐시를 사용 중이고 다른 제한이 필요한 경우 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가 전역적으로 설치되지 않은 경우).

페이지에 이러한 파일 중 하나를 포함하고 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()작동하지 않습니다.

같은 이유로 includes는 를 사용하지 않으면 작동하지 않습니다 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: DigitalBrainstem 의 Javascript EJS

EJS 구현에는 여러 가지가 있습니다.

TJ의 구현, 이 라이브러리의 v1: https://github.com/tj/ejs
Jupiter Consulting의 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.kuwata-lab.com/erubis/users-guide.04.html#lang-javascript
DigitalBrainstem EJS 언어 지원: https://github.com/Digitalbrainstem/ejs-grammar

특허

Apache 라이센스 버전 2.0( http://www.apache.org/licenses/LICENSE-2.0 ) 에 따라 라이센스가 부여되었습니다.

개발 가이드

기본 모듈

내장 객체

커뮤니티 모듈

EJS

설치

특징

예

용법

옵션

태그

포함

맞춤 구분 기호

캐싱

사용자 정의 파일 로더

레이아웃

클라이언트 측 지원

Example

Caveats

IDE Integration with Syntax Highlighting

특허

개발 가이드

기본 모듈

내장 객체

커뮤니티 모듈

EJS

설치

특징

예

용법

옵션

태그

포함

맞춤 구분 기호

캐싱

사용자 정의 파일 로더

레이아웃

클라이언트 측 지원

Example

Caveats

IDE Integration with Syntax Highlighting

관련 프로젝트

특허