手把手构建一个脚手架（下）

工作流梳理

通过上节内容我们已经拿到了即将要创建的组件配置项，接下来我们的一个工作流大概如下：

Step1 获取组件目录

获取组件目录是我们需要做的第一步，它决定我们生成的文件位置在哪儿。
我们可以通过读取命令行参数获取组件目录，具体代码如下：

const componentName = process.argv[3];

Step2 确定组件名称

当我们拿到组件名称之后，我们需要对其进行一个格式化处理，以便于统一组件的命名规范，让后续工作更加简单。

Step3 组件目录创建

创建组件目录也是一个非常重要的步骤，因为它关系到我们组件的最终位置，具体代码如下：

fs.mkdirSync(path.join(directory, componentName));

Step4 脚手架模板渲染

拿到组件目录之后，我们就可以将脚手架模板渲染到该目录下了。

Step5 完成提示

完成了组件的生成之后，我们可以给用户一些提示信息，比如组件的生成路径等。

封装渲染方法

接下来我们需要封装一个渲染方法，这个方法将作为整个脚手架的核心，负责将模板渲染到指定目录。具体代码如下：

/**
 * 文件渲染函数
 */
const renderTemplateFile = (source, dest, data) => {
  if (!fs.existsSync(source)) {
    throw new Error(`Template file ${source} does not exist.`);
  }

  const template = fs.readFileSync(source, "utf8");
  const output = ejs.render(template, data);

  fs.writeFileSync(dest, output, "utf8");
};

这个方法接受三个参数，分别是模板文件的路径、目标文件的路径和数据对象。它首先检查模板文件是否存在，如果不存在，就会抛出一个错误。然后它读取模板文件的内容并使用 EJS 渲染模板，最后将渲染后的内容写入目标文件。

模板文件渲染

完成了渲染方法之后，我们就可以开始渲染模板文件了。在脚手架中，我们定义了三个模板文件：

• component.ejs：组件的主文件
• component.spec.ejs：组件的测试文件
• component.stories.ejs：组件的故事书文件

在上一篇文章中我们已经生成了这些模板文件，这里我们就直接使用它们。

我们使用封装的渲染方法将这些模板文件渲染到组件目录中，具体代码如下：

renderTemplateFile(componentTemplate, path.join(directory, componentName, `${componentName}.vue`), { componentName });
renderTemplateFile(componentSpecTemplate, path.join(directory, componentName, `${componentName}.spec.js`), { componentName });
renderTemplateFile(componentStoriesTemplate, path.join(directory, componentName, `${componentName}.stories.js`), { componentName });

完成提示

完成了组件的生成之后，我们可以给用户一些提示信息，比如组件的生成路径等。具体代码如下：

console.log(`Component ${componentName} created successfully at ${directory}`);

总结

至此，我们就完成了整个脚手架的构建。在本文中，我们学习了如何封装渲染方法、如何渲染模板文件以及如何给用户一些提示信息。