浅谈EJS模板语法 | 前端框架中index.html中的变量语法

儒雅的烤地瓜

已于 2023-09-11 08:46:35 修改

阅读量2.2k

点赞数 2

分类专栏： JavaScript Vue.js 文章标签： html 前端框架 EJS ejs

于 2023-09-11 08:45:54 首次发布

本文链接：https://blog.csdn.net/sunyctf/article/details/130508593

版权

JavaScript 同时被 2 个专栏收录

60 篇文章 19 订阅

订阅专栏

Vue.js

55 篇文章 25 订阅

订阅专栏

💡 写在前面

在 vue 或者 react 前端项目中，我们经常会在入口模板文件 index.html 中看到用 %PUBLIC_URL%、<%= BASE_URL %>、<%= title %> 之类的变量插入。但这似乎我们平时的 html 或者 javscript 压根没见过这类的写法，一时感觉超出了自己的知识盲区。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title><%= title %></title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>

◼️ %PUBLIC_URL%

%PUBLIC_URL% 代表项目 public 静态资源文件夹的绝对路径，vite3 中 index.html 中的 URL 将被自动转换，因此不再需要 %PUBLIC_URL% 占位符了，开始 | Vite 官方中文文档

一般用来设置网站的图标、logo或者全局css、js引用这些，如：

<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />。

对应 vite 中的 publicDir 配置，默认就是 public

◼️ <%= BASE_URL %>

项目根目录

要修改这个值，vue + webpack项目中 Vue CLI 3.3 之前的版本，配置：baseURl: '/static'；Vue CLI 3.3 之后（包括3.3）的版本，配置：publicPath: '/static'。

这个值在开发环境下同样生效，这么改打包后是没问题了，但项目本地运行会报错，官方也给出了方案，只需要判断一下当前环境是生产环境还是开发环境，再设置不同的路径就可以了：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production'
    ? '/static/'
    : '/'
}

💡 EJS 模板语法

EJS -- 嵌入式 JavaScript 模板引擎 | EJS 中文文档

EJS -- Embedded JavaScript templates

EJS 是什么？简单了解一下，我们来看看官方对EJS的定义：

What is the "E" for? "Embedded?" Could be. How about "Effective," "Elegant," or just "Easy"? EJS is a simple templating language that lets you generate HTML markup with plain JavaScript. No religiousness about how to organize things. No reinvention of iteration and control-flow. It's just plain JavaScript.

“E” 代表什么？可以表示 “可嵌入（Embedded）”，也可以是“高效（Effective）”、“优雅（Elegant）”或者是“简单（Easy）”。EJS 是一套简单的模板语言，帮你利用普通的 JavaScript 代码生成 HTML 页面。EJS 没有如何组织内容的教条；也没有再造一套迭代和控制流语法；有的只是普通的 JavaScript 代码而已。

像我们在 html 代码中见到的 <%%>、<%=%>、<%:%> 这类语法，其实是 ejs模版语法，EJS 可以将数据和模板合并然后生成 HTML 文本。也就是帮我们用 JavaScript 代码来生成 HTML 页面。

那我们看下它怎么渲染 HTML：

const ejs = require('ejs'),
let people = ['geddy', 'neil', 'alex']
const html = ejs.render('<%= people.join(", "); %>', {people: people});

是不是和 ReactDOM 的 render 很像？

ReactDOM.render(<h1>Hello, Mum</h1>, document.getElementById('root'));

用模版语言渲染页面的方法都大同小异，而且一般也不会单独用ejs，像vue-cli这些框架都帮我们集成好了。所以这个部分不用太过关注，更不用去精读它的教程。在现代项目里，我们一般只需要用到它的模版语法。

ejs的四种语法：

1、纯脚本标签

<% code %>

里面可以直接写 js 代码，用于书写流程控制语句，不输出任何内容。

<%
for (var i = 0; i < 10; i++) {
  alert('hello world')
}
%>

又如

<% alert('hello world') %> // 会执行弹框

2、输出经过 HTML 转义的内容

<%= xxx %>

将数据输出到模板，如果输出的数据是HTML，则会被转义，如 '<'、'>'、'&' 等 html 字符，会被转义成字符实体：“< > &”

<%= value %> 可以是变量，<%= a ? b : c %> 也可以是表达式，<%= a + b %>

即变量如果包含 '<'、'>'、'&'等HTML字符，会被转义成字符实体，像< > &

因此，用<%=，最好保证里面内容不要有HTML字符

const text = '<p>你好你好</p>'
<h2><%= text %></h2> // 输出 &lt;p&gt;你好你好&lt;/p&gt; 插入 <h2> 标签中

3、输出非转义的内容

<%- 富文本数据 %>

和上一个类似，不过不会被转义，通常用来输出富文本内容，即 HTML内容

上面说到<%=会转义HTML字符，那如果我们就是想输出一段HTML怎么办呢？那么我们局可以使用<%-它不会解析HTML标签，也不会将字符转义后输出。像下面的例子，就会直接把 <p>我来啦</p> 插入 <h2> 标签中

const html = '<p>我是烤地瓜</p>'
<h2><%- html %></h2>

4、引入其他模版

<%- include('文件路径') %>

将相对于模板路径中的模板片段包含进来。用<%- include指令而不是<% include，为的是避免对输出的 HTML 代码做转义处理。

// 当前模版路径：./views/tmp.ejs
// 引入模版路径：./views/user/show.ejs
<ul>
  <% users.forEach(function(user){ %>
    <%- include('user/show', {user: user}); %>
  <% }); %>
</ul>

5、条件判断

<% if (condition1) { %>
  ... 
<% } %>

<% if (condition1) { %>
  ... 
<% } else if (condition2) { %>
  ... 
<% } %>

// 举例
<% if (a && b) { %>
  <p>可以直接放 html 内容</p>
<% } %>

<% if (a && b) { %>
  <% console.log('也可以嵌套任意ejs模版语句') %>
<% } %>

比如，vue-cli在index.html判断环境变量加载不同代码

在vue-cli生成的项目中，index.html下是无法直接获取到环境变量的，但是可以使用webpack提供的特殊语法获取的服务中的变量 <% %>

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width,initial-scale=1.0" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
        <title><%= htmlWebpackPlugin.options.title %></title>

        <% if (process.env.NODE_ENV === 'production' ) { %>
        <script>
            code.....
        </script>
        <% } else {%>
        <script>
            code.....
        </script>
        <% } %>
    </head>
    <body>
        <noscript>
            <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
        </noscript>
        <div id="app"></div>
        <!-- built files will be auto injected -->
    </body>
</html>