前言

在前端开发中，我们通常需要编写一些文档或者现场展示页面。这个过程中有时候需要使用到模板引擎，以便更方便地生成 HTML 页面。ejs 是一款常用的模板引擎，mos-plugin-ejs 则是使用 ejs 模板引擎的一种解决方案。

本文重点介绍 npm 包 mos-plugin-ejs 的使用方法，帮助大家更好地进行前端开发。

安装

在使用 mos-plugin-ejs 之前，需要先安装 Node.js 和 npm。然后在命令行中执行以下命令即可安装 mos-plugin-ejs：

npm install --save-dev mos mos-plugin-ejs

安装完成后，需要进行相关配置。首先，在项目根目录下新建一个 .mos.yml 文件，并在其中添加如下配置：

plugins:
  - name: mos-plugin-ejs
    options:
      root: ./src
      extension: .ejs

其中，root 表示 ejs 模板文件所在的目录，extension 表示 ejs 模板文件的扩展名。

mos-plugin-ejs 提供了两种使用方式：内联模板和外部模板。

内联模板指的是将模板代码直接写在 markdown 文件中，使用 \``ejs和```` 包裹模板代码：

# 标题

这是正文，使用内联模板：

```ejs
<% for (var i = 0; i < items.length; i++) { %>
  <li><%= items[i] %></li>
<% } %>

效果如下：

这是正文，使用内联模板：

<% for (var i = 0; i < items.length; i++) { %>
  <li><%= items[i] %></li>
<% } %>

外部模板指的是将模板代码写在外部文件中，然后通过引入的方式使用。在 markdown 文件中使用 \@import 引入外部文件：

# 标题

这是正文，使用外部模板：

\@import('./template.ejs')

其中 ./template.ejs 是外部模板文件的路径。

以下是一份完整的示例代码，帮助大家更好地理解 mos-plugin-ejs 的使用方法：

首先，在项目根目录下新建一个 .mos.yml 文件，添加如下配置：

plugins:
  - name: mos-plugin-ejs
    options:
      root: ./src
      extension: .ejs

然后，在 ./src 目录下新建一个 template.ejs 文件，添加如下内容：

<ul>
<% for (var i = 0; i < items.length; i++) { %>
  <li><%= items[i] %></li>
<% } %>
</ul>

接着，在 markdown 文件中使用内联模板：

# 标题

这是正文，使用内联模板：

```ejs
<% for (var i = 0; i < items.length; i++) { %>
  <li><%= items[i] %></li>
<% } %>

或者使用外部模板：

# 标题

这是正文，使用外部模板：

\@import('./src/template.ejs')

最后，在命令行中执行 mos README.md 命令即可生成 HTML 文件。

在本文中，我们介绍了如何使用 mos-plugin-ejs 进行前端开发。通过学习本文，相信大家已经掌握了 mos-plugin-ejs 的基本使用方法，并可以在项目中灵活地应用它。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/42528