【架构师（第十七篇）】脚手架之 ejs 和 glob 的使用

一尾流莺

发布于 2022-12-10 13:32:14

1.3K0

发布于 2022-12-10 13:32:14

文章被收录于专栏：一尾流莺学前端

脚手架项目和组件初始化开发

将收获什么

ejs 模板渲染
glob 文件筛选
项目标准安装和自定义安装
组件库初始化和安装

主要内容

脚手架安装模板功能架构设计
脚手架模板安装核心实现
ejs 库功能详解
脚手架安装模板功能开发
组件模板开发及脚手架组件初始化功能支持
脚手架自定义初始化项目模板功能开发

模板功能架构设计

之前已经发过这个流程图，下面来回顾一下，特别需要注意的是项目和组件的流程有一些区别。

准备阶段

下载模板阶段

安装模板阶段

ejs 的三种用法

安装 ejs

npm i -S ejs

编写一些基础代码

const ejs = require('ejs')
const path = require('path')

// 定义模板字符串
const html = '<div><%= user.name %></div>'

// 配置对象
const options = {}

// 数据
const data = {
  user: {
    name: '一尾流莺'
  }
}
const data2 = {
  user: {
    name: 'yiweiliuying'
  }
}

再准备一个 template.html 文件，内容如下

<div><%= user.name %></div>

第一种用法

用于多次调用同一个 compile function ，传入不同数据。使用 ejs.compile 生成 compile function是比较消耗性能的，所以需要多次调用的时候，生成一个就行了。

// 返回一个 compile  function , 用来解析 html 中的 ejs 模板
const template = ejs.compile(html, options)

// 得到一个编译后的模板
const compiledTemplate = template(data)
const compiledTemplate2 = template(data2)

console.log('🚀🚀 ~ compiledTemplate', compiledTemplate);
console.log('🚀🚀 ~ compiledTemplate2', compiledTemplate2);

可以看到模板字符串已经被替换成数据了。

第二种用法

用于只渲染一次模板的时候

const renderedTemplate = ejs.render(html, data, options)
console.log('🚀🚀 ~ renderedTemplate', renderedTemplate);

结果是一样的。

第三种用法

第三种用法是对文件进行编译。

编译文件有两种方式。

第一种，只传入三个参数，会返回一个 Promise

const renderedFile = ejs.renderFile(path.resolve(__dirname, 'template.html'), data, options)
console.log('🚀🚀 ~ renderedFile', renderedFile);

可以看到是一个 Promise 对象。

第二种，可以传入第四个参数，回调函数。

ejs.renderFile(path.resolve(__dirname, 'template.html'), data, options, (err, file) => {
  console.log('🚀🚀 ~ file', file);
})

ejs 标签的含义

写毕设的时候用的是 art-template 这一个模板引擎，但是忘的差不多了，应该跟 ejs 语法差不多。

<%: script 标签，用于流程控制，不会输出在页面上
<%_: 删除其前面的空格符
<%=: 输出数据到模板（输出是转义 HTML 字符串）
<%-: 输出非转义的数据到模板
<%#: 注释标签，不执行，不输出内容
<%%: 输出字符串 <%
%>: 一般结束标签
-%>: 删除后序的换行符
-%>: 将结束后的空格符删除

条件判断

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

循环

<% for(var i =0;i<10;i++) {%>
    <div><%= user.name%></div>
<% } %>

包含

通过 include 指令将相对于模板路径中的模板片段包含进来。

<% for(var i =0;i<10;i++) {%>
    <div><%= user.name%></div>
<% } %>
<%- include('./footer.html', {user}); %>

自定义分隔符

let ejs = require('ejs');
let users = ['geddy', 'neil', 'alex'];

// 单个模板文件
ejs.render('<?= users.join(" | "); ?>', {users: users},
    {delimiter: '?'});
// => 'geddy | neil | alex'

// 全局
ejs.delimiter = '$';
ejs.render('<$= users.join(" | "); $>', {users: users});
// => 'geddy | neil | alex'

自定义文件加载器

默认的文件加载器是 fs.readFileSync，如果想要自定义它, 设置 ejs.fileLoader 即可。

let ejs = require('ejs');
let myFileLoader = function (filePath) {
  return 'myFileLoader: ' + fs.readFileSync(filePath);
};

ejs.fileLoader = myFileLoad;

使用此功能，可以在读取模板之前对其进行预处理。

布局

ejs 并未对块（blocks）提供专门的支持，但是可以通过包含页眉和页脚来实现布局，如下所示：

<%- include('header'); -%>
<h1>
  Title
</h1>
<p>
  My page
</p>
<%- include('footer'); -%>

glob 的使用

glob 是用来匹配文件路径的，匹配规则如下。

* 匹配任意 0 或 多个 任意字符
? 匹配任意 一个 字符
[...] 若字符在中括号中，则匹配。若以 ! 或 ^ 开头，若字符不在中括号中，则匹配
!(pattern|pattern|pattern) 不满足括号中的所有模式则匹配
?(pattern|pattern|pattern) 满足 0 或 1 括号中的模式则匹配
+(pattern|pattern|pattern) 满足 1 或更多括号中的模式则匹配
*(a|b|c) 满足 0 或更多括号中的模式则匹配
@(pattern|pat*|pat?erN) 满足 1 个括号中的模式则匹配
** 跨路径匹配任意字符

安装

npm i glob -S

匹配所有 js 文件，忽略 node_modules 下的所有文件以及 webpack.config.js。

const glob = require('glob')

glob('**/*.js', {
  ignore: ['node_modules/**', 'webpack.config.js']
}, (err, file) => {
  console.log('🚀🚀 ~ err', err);
  console.log('🚀🚀 ~ file', file);
})

结果如下