基于yeoman实现自定义脚手架

原创已于 2022-10-24 11:38:47 修改 · 1.6k 阅读

6 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #1024程序员节

于 2022-10-24 10:38:17 首次发布

本文介绍了如何使用yeoman创建自定义前端脚手架，通过编写generator，实现命令行交互、模板文件的生成，从而提高开发效率。yeoman的优点在于减少重复工作，统一团队开发规范，但缺点是不够专注。文章还提到了Ejs模板语法的应用和发布脚手架的注意事项。

前言

在我们开发中，使用脚手架起项目后，需要为项目增加特定工具、基础代码，依赖，造成工作冗余。这时一个符合团队、个人开发习惯的自定义脚手架就显得很重要，yeoman便可以解决此类问题

什么是yeoman

Yeoman是一款通用的创建现代化前端应用的脚手架工具，与vue-cli不同，Yeoman更像是一个脚手架的运行平台，可以搭配不同的generator创建任何类型的项目，即我们可以通过创建generator来定制自己的前端脚手架
Yeoman官网

优点

对个人去除重复的工作，避免错误发生，提高效率
对团队提供相同的组织结构、开发范式、模块依赖、工具配置、基础代码

缺点

过于通用，不够专注

yeoman创建自定义脚手架

全局安装yo (安装过程这里用的是npm，也可用yarn)

npm install yo --global

创建一个脚手架项目文件，并初始化

npm init

需要特别注意一下，这里的包名需要按照yeoman的命名规范yeoman-xxx，xxx为自己需要的包名
在这里插入图片描述

安装yeoman基类

npm i yeoman-generator

创建目录结构
在这里插入图片描述

generators/app/index.js 是Generator核心入口文件，也是默认生成器实例入口（router是子生成器实例路径）
generators/app/templates文件夹下存放模板文件

在编写代码前先来了解一下api
在这里插入图片描述

prompting 可以收集命令行交互问题的
writing 进行写入操作

回想一下，我们在使用vue、react等脚手架时的过程，输入创建命令→命令行交互→生成项目
下面按照这个顺序进行编写代码

代码编写

const Generator = require("yeoman-generator");
module.exports = class extends Generator {
  prompting() {
    return this.prompt([
      //命令行输入类交互
      {
        type: 'input',
        name: 'name',
        message: '你的项目名称是？',
        default: 'generators-app'

      }
    ])
      .then(answers => {
        this.answers = answers
      })
  }
  writing() {
    //模板文件路径
    const tmpl = this.templatePath('index.html')
    // 输出目标文件路径
    const output = this.destinationPath('index.html')
    // 模板数据
    const context = this.answers
    this.fs.copyTpl(tmpl, output, context)
  }
}

创建命令

创建命令是yo xxx，xxx是上面提到的自己起的包名
命令行交互

prompting会在输入创建命令后，在命令行展示this.prompt方法中的问题，返回一个promise

命令行返回参数格式如下
生成项目
命令行交互完成后，进入writing方法，从templates中copy文件到命令行运行目录

使用基类中集成的fs方法，进行复制写入操作

写入完成生成文件