深入浅出解构脚手架之 ejs 和 glob 的使用

2023-09-19 15:55:27

脚手架，前端开发利器

脚手架在前端开发中发挥着至关重要的作用，它可以帮助开发者快速搭建项目结构，减少重复劳动，从而提高开发效率。常见的脚手架工具包括 Yeoman、Create React App 和 Vue CLI 等。

ejs 和 glob，脚手架中的得力助手

在脚手架的构建过程中，ejs 和 glob 这两个工具经常被使用。ejs 是一个模板引擎，可以将数据动态地渲染到模板中，从而生成最终的代码。glob 则是一个文件匹配工具，可以帮助开发者轻松地查找和匹配文件。

ejs 的应用

ejs 的使用非常简单，只需要在模板文件中使用 <% %> 和 <%= %> 这两个标签即可。<% %> 标签用于输出代码，<%= %> 标签用于输出数据。

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1><%= heading %></h1>
  <p><%= content %></p>
</body>
</html>

在上面的代码中，<%= title %>、<%= heading %> 和 <%= content %> 这三个标签分别输出 title、heading 和 content 这三个变量的值。

glob 的应用

glob 的使用也非常简单，只需要使用 glob.sync() 函数即可。glob.sync() 函数接收一个字符串作为参数，表示要匹配的文件路径。该函数返回一个数组，其中包含所有匹配的文件路径。

const glob = require('glob');

const files = glob.sync('src/**/*.js');

console.log(files);

在上面的代码中，glob.sync('src/**/*.js') 会匹配 src 目录下所有以 .js 结尾的文件，并将匹配到的文件路径存储在 files 数组中。

案例：使用 ejs 和 glob 构建脚手架

现在，我们来看一个使用 ejs 和 glob 构建脚手架的示例。

首先，我们创建一个名为 my-project 的文件夹，并在其中创建一个 package.json 文件。package.json 文件的内容如下：

{
  "name": "my-project",
  "version": "1.0.0",
  "description": "My awesome project",
  "scripts": {
    "start": "node index.js"
  },
  "dependencies": {
    "ejs": "^2.7.4",
    "glob": "^7.1.6"
  }
}

接下来，我们创建一个名为 index.js 的文件。index.js 文件的内容如下：

const ejs = require('ejs');
const glob = require('glob');

const template = ejs.compile(
  '<!DOCTYPE html>\n' +
  '<html>\n' +
  '<head>\n' +
  '  \n' +
  '</head>\n' +
  '<body>\n' +
  '  <h1><%= heading %></h1>\n' +
  '  <p><%= content %></p>\n' +
  '</body>\n' +
  '</html>'
);

const files = glob.sync('templates/*.ejs');

for (const file of files) {
  const data = {
    title: 'My Awesome Project',
    heading: 'Welcome to My Awesome Project',
    content: 'This is the content of my awesome project.'
  };

  const html = template(data);

  console.log(html);
}

在上面的代码中，我们首先使用 ejs.compile() 函数编译了一个模板。然后，我们使用 glob.sync() 函数匹配了 templates 目录下所有以 .ejs 结尾的文件。接下来，我们遍历这些文件，并使用 ejs.render() 函数将数据渲染到模板中，从而生成最终的 HTML 代码。最后，我们将生成的 HTML 代码输出到控制台。

运行脚手架

npm start

输出结果：

<!DOCTYPE html>
<html>
<head>
  
</head>
<body>
  <h1>Welcome to My Awesome Project</h1>
  <p>This is the content of my awesome project.</p>
</body>
</html>