大家好，很高兴又见面了，我是"高级前端‬进阶‬"，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发!

今天给大家带来的主题是用于 Node、Deno 和浏览器的嵌入式 JS 模板引擎，即 Eta.js，其具有轻量级、快速且可插拔的诸多特性，用 TypeScript 编写。话不多说，直接开始！

1.什么是 Eta

Eta 在世界语（Esperanto）中是微小的意思，它还可以用作各种很酷的短语的首字母缩写词，比如：“ECMAScript Template Awesomeness”、“Embedded Templating Alternative”等。同时，Eta 也是希腊字母表中的一个字母，代表数学领域中的各种重要概念，比如：效率，同时三个字母长也非常适合文件扩展名。

讲了 Eta 名字的来源，那么 Eta 到底是什么呢？Eta 是一个轻量级且速度极快的嵌入式 JS 模板引擎，可在 Node、Deno 和浏览器中运行。 它由 Squirrelly 的开发人员创建，使用 TypeScript 编写，强调超高的性能、可配置性和包大小。

Eta 的典型 特点包括：

0 依赖项非常轻巧，压缩后仅 2.4KB⚡️ 用 TypeScript 编写✨ 支持 Deno、Node.js 和浏览器超级快可配置：支持插件、自定义分隔符、缓存强大：预编译、部分、异步，强大布局支持，ExpressJS 开箱即用可靠：更好的引号、注释支持，比如 <%= someval + "string %>" %> 编译正确，但因 doT 或 EJS 则会失败格式化的错误报告：支持 ⚡️ 导出 ES 模块以及 UMD简单的模板语法

目前 Eta 在 Github 上通过 MIT 协议开源，有超过 950+的 star、NPM周平均下载量达到了252k，是一个值得关注的前端开源项目。

2. Eta 与其他模板引擎对比

下图展示了 Eta.js 模板字符串的简单用例，接下来一起看看 Eta.js 对比 EJS 、doT.js 、Handlebars 、ES6 Template Literals等不同模板解决方案的优势如何。

2.1 Eta vs EJS

Eta 的语法与 EJS 非常相似（大多数模板应该适用于任一引擎），同时 Eta 具有相似的 API，并且 Eta 和 EJS 共享相同的文件处理逻辑。

以下是 Eta 和 EJS 之间的区别：

Eta 更轻量级： Eta 压缩后的重量不到 2.5KB，而 EJS 压缩后的重量为 4.4KBEta 编译和呈现模板的速度比 EJS 快得多：可以查看这些基准：Eta 允许左侧空格控制（带有 -），这在 EJS 中不起作用，因为 EJS 在左侧使用 - 来指示不应转义该值。 相反，Eta 使用 ~ 输出原始值Eta 提供了更多的分隔符灵活性。例如，开发者可以将它们设置为 {{ 和 }}，而对于 EJS，这是不可能的Eta 添加插件支持Eta 中的注释使用 /_ ... _/ 允许围绕模板标签进行注释Eta 正确解析字符串，比如<%= "%>" %> 能在 Eta 中工作，而在 EJS 中中断Eta 公开 Typescript 类型并分发 UMD 构建Eta 支持自定义标签类型指示器，比如可以将 <%= 更改为 <%*

值得一提的是，目前 EJS 在 Github 上通过 MIT 协议开源，有超过 7.1k+的 star、8159k的项目依赖量，代码贡献者120+，是一个非常优秀的前端开源项目。本文介绍 Eta.js 的初衷也不是让大家都转向 Eta.js，而是多一种方案的了解。

2.2 Eta vs doT.js

Eta 和 doT.js 都允许嵌入 JavaScript，并且与其他模板引擎相比都具有一流的性能（尽管 Eta 使用 HTML 转义模板的速度稍快）。

doT.js的logo

以下是 Eta 和 doT.js 之间的一些区别：

Eta 允许控制如何去除标记后的前后空格。使用 Eta 设置自定义分隔符比使用 doT 简单得多，开发者不必重写每个配置正则表达式Eta 支持插件、异步Eta 能正确解析字符串和多行注释。 示例：<%= "%>" %> 在 Eta 中工作，而在 doT 中等效中断Eta 公开 Typescript 类型并分发 UMD 构建Eta 支持运行时部分和文件处理。

值得一提的是，目前 doT.js 在 Github 上通过 MIT 协议开源，有超过 4.9k+的 star、1.1k的fork、26.5k的项目依赖量，是一个非常优秀的前端开源项目。

2.3 Eta vs Handlebars

Eta 和 Handlebars 在某些方面非常不同，比如：Eta 是一个嵌入式模板引擎，而 Handlebars 是一个无逻辑模板引擎。

Handlebars.js的logo

以下是 Eta 和 Handlebars 之间的一些其他区别：

Eta 更轻量级： Eta 压缩后的重量不到 2.5KB，而 Handlebars 压缩后的重量约为 22KBEta 编译和呈现模板的速度比 Handlebars 快得多——大约快 7 倍： 查看这些基准：Eta 允许设置自定义分隔符、支持插件、公开 Typescript 类型并分发 UMD 构建Eta 自定义标签类型指标， 比如可以将 <%= 更改为 <%*使用 Eta，开发者不需要注册大量的帮助函数来完成简单的任务，比如检查一个值是否等于另一个值

请注意，Eta 模板作为可信代码运行，就像编写的任何其他 JavaScript 一样。如果在服务器、站点等上运行用户定义/创建的模板，可能应该使用为此目的构建的工具，例如 Handlebars。

值得一提的是，目前 Handlebars.js 在 Github 上通过 MIT 协议开源，有超过 17.2k+的 star、2.1k的fork、代码贡献者180+，是一个非常优秀的前端开源项目。

2.4 Eta vs ES6 Template Literals

ES6 模板字符串是一个非常有用的工具，特别是对于缩短简单的字符串连接。 但是使用模板字符串编写完整的模板很快就会失控。 下面是 Eta 和模板字符串的比较：

Eta 将模板编译成 JavaScript 函数，这些函数使用字符串连接并具有与模板字符串相当的性能Eta 可让开发者控制标签前后的空格Eta 为开发者提供了更多的分隔符灵活性。例如，开发者可以将它们设置为 {{ 和 }}，或者将它们设置为 ${ 和 } 以模仿模板字符串Eta 支持插件Eta 支持使用 /_ ... _/ 语法的注释，就像在常规 JavaScript 中一样。 模板字符串要求开发者在注释后粘贴一个空白字符串：/_ ... _/""，这可读性要差得多要在模板字符串中编写条件，则必须使用三元运算符。 添加更多条件或嵌套条件，它很快就会变成一团乱麻，而在 Eta 中编写条件语句更简单且更易读

当然，对于大多数的前端开发场景，直接使用 ES6 模板字符串就能够囊括。至于是否要使用一个模板引擎，大家可以根据自己的项目来做选择就好。

3.Eta 与打包工具的集成

目前 Eta 支持在众多环境中使用，只需要安装相应环境的插件即可，比如：

Visual Studio Code： eta-vscodeESLint：eslint-plugin-eta 的创建提供一个 ESLint 处理器，借助它可以对 Eta 模板进行 lintCLI：存在一个名为 etajs-cli 的官方 Eta CLIWebpack：目前没有官方的 Webpack 集成，但是可以通过在 html-loader 中添加相应的 preprocessor

{  loader: 'html-loader',  options: {    preprocessor(content, loaderContext) {      return eta.render(content, {}, { filename: loaderContext.resourcePath });    },  },}

下面是 views/template.eta 的值：

My favorite template engine is <%= it.favorite %> because it is: <%= it.reasons.join(', ') %><%~ includeFile('./footer', it) %>

下面是 views/footer.eta 的值：

<footer>Signed: <%= it.name %> </footer>

可以通过下面的示例代码与 Express.js 快速集成：

var express = require('express');var app = express();var eta = require('eta');app.engine('eta', eta.renderFile);eta.configure({ views: './views', cache: true });app.set('views', './views');app.set('view cache', true);app.set('view engine', 'eta');app.get('/', function (req, res) {  res.render('template', {    favorite: 'Eta',    name: 'Ben',    reasons: ['fast', 'lightweight', 'simple'],  });});app.listen(8000, function () {  console.log('listening to requests on port 8000');});

下面是 views/template.eta 的值：

My favorite food is <%= it.food %><%~ includeFile('./footer') %>

下面是 views/footer.eta 的值：

<footer>This is a footer!</footer>

在 index.js 中可以直接使用：

var eta = require('eta');var path = require('path');// Set Eta's configurationeta.configure({  // This tells Eta to look for templates  // In the /views directory  views: path.join(__dirname, 'views'),});// Eta assumes the .eta extension if you don't specify an extension// You could also write renderFile("template.eta"), renderFile(path.join(__dirname, "views/template.eta"),// renderFile("/template"), etc.await eta.renderFile('./template', { food: 'cake' });/*My favorite food is cake<footer>This is a footer!</footer>*/

下面是 views/template.eta 的值：

My favorite food is <%= it.food %><%~ includeFile('./footer') %>

views/footer.eta 的内容如下：

<footer>This is a footer!</footer>

下面可以在 Deno 中直接集成 Eta：

import { renderFile, configure } from ';;const viewPath = `${Deno.cwd()}/views/`;// Set Eta's configurationconfigure({  // This tells Eta to look for templates  // In the /views directory  views: viewPath,});// Eta assumes the .eta extension if you don't specify an extension// You could also write renderFile("template.eta"),// renderFile("/template"), etc.let templateResult = await renderFile('./template', { food: 'cake' });console.log(templateResult);/*My favorite food is cake<footer>This is a footer!</footer>*/

除了使用 Eta 的简答语法外，Eta 还可以使用条件渲染、循环等高级特性。下面是使用 Eta 做条件渲染的代码示例：

<% if(it.somevalue === 1) { %>Display this<% } else { %>Display this instead<% } %>

下面是 Eta 用于循环渲染的示例：

<ul><% it.users.forEach(function(user){ %><li><%= user.name %></li><% }) %></ul>

本文主要和大家介绍用于 Node、Deno 和浏览器的嵌入式 JS 模板引擎，即 Eta.js，其具有轻量级、快速且可插拔的诸多特性，用 TypeScript 编写 。相信通过本文的阅读，大家对 Eta.js 会有一个初步的了解。

因为篇幅有限，文章并没有过多展开，如果有兴趣，可以在我的主页继续阅读，同时文末的参考资料提供了大量优秀文档以供学习。最后，欢迎大家点赞、评论、转发、收藏！

参考资料

;calls=6000&escape=true