Posted at

Webpack の ejs-loader は EJS じゃなく lodash template だからタグの記法に気をつけろ

Webpack の ejs-loader プラグインは EJS 記法のテンプレートをロードしてくれそうな名前をしている……が、実際には lodash template 記法に対応している。

厄介なことに、 EJS と lodash template は記法がほとんど同じだが、 値をエスケープして埋め込むタグとエスケープせずに埋め込むタグが入れ替わっている。

const data = "<b>Hello</b>";

Lang Input Output
-------------------------------------------------------------------
EJS <%= data %> "&lt;b&gt;Hello&lt;/b&gt;"
EJS <%- data %> "<b>Hello</b>"

lodash <%= data %> "<b>Hello</b>"
lodash <%- data %> "&lt;b&gt;Hello&lt;/b&gt;"

うっかり EJS 記法でテンプレートを書くとエスケープが壊れるので注意すること。