定制脚手架_万能脚手架

简介

Yeoman（官网：https://yeoman.io/）作为最老牌，最强大，最通用的脚手架工具，它有很多值得我们借鉴和学习的地方。
Yeoman 官方的定义是它是一款用于创造现代化 web 应用的脚手架工具。
不同于 vue-cli 这样的工具，Yeoman 更像是一个脚手架的运行平台，我们可以通过 yeoman 搭配不同的 Generator 去创建任何类型的项目。

##使用步骤：
1.明确你的需求
2.找到合适的Generator
3.全局范围安装找到的Generator
4.通过Yo运行对应的Generator
5.通过命令行交互填写选项
6.生成你所需要的项目结构

使用方式

1. 全局安装yo
   npm install yo –global

2.安装对应的generator
npm install generator-node

3. 通过yo运行generator
   yo node

自定义生成器

Generator基本结构

1.创建目录
2.yarn init 初始化项目（项目名称必须是 generator-xxx ）
3.安装yeoman-generator(提供一些创建生成器的辅助函数)
yarn add yeoman-generator

4.创建目录结构

generator-xxx/
generator/ … (生成器目录)
丨 丨→ app/… (默认生成器目录)
丨 丨 丨→ index.js… (默认生成器实现)
丨 丨 丨→ templates/… (存放默认生成器的模板)
丨 丨 丨 丨→ xxx模板… (默认生成器的模板)
丨 丨 丨 丨→ xxx模板2… (默认生成器的模板)
丨 丨→ compoment/… (其他生成器目录)
丨 丨 丨→ index.js… (其他生成器实现)
package.json … (模块包配置文件)

5.编写生成器实现代码

//  作为Generator的入口
// 需要导出一个继承自Yeoman Generator的类型
//  Yeoman Generator在工作时会自动调用我们在此类型中定义的一些生命周期方法
//  我们在这些方法中可以通过调用父类提供的一些工具方法实现一些功能，如文件写入

const Generator = require("yeoman-generator");

module.exports = class extends Generator {
  prompting() {
    //  yeoman在询问用户环节会调用此方法
    // 在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问
    return this.prompt([
      {
        type: "input",
        name: "name",
        message: "Your project name",
        default: this.appname, // appname 为项目生成目录名称
      },
    ]).then((answers) => {
      this.answers = answers;
    });
  }

  writing() {
    //  yeoman自动生成文件阶段调用此方法
    //  在此尝试写入文件
    this.fs.write(this.destinationPath("temp.txt"), "hello word");

    // 通过模板方式写入文件到目标目录

    //  模板文件路径
    const tmpl = this.templatePath("foo.txt");
    //  输出目标路径
    const output = this.destinationPath("foo.txt");
    //  模板数据上下文
    const context = { title: "hello template", success: false };
    this.fs.copyTpl(tmpl, output, context);

    //  heml模板文件路径
    const htmlTmp = this.templatePath("index.html");
    //  输出目标路径
    const htmlOutput = this.destinationPath("index.html");
    this.fs.copyTpl(htmlTmp, htmlOutput, this.answers);
  }
};

##生成项目工程

1. 用yarn link 命令将生成器链接到全局
2. 切换到需要生成工程的目录下 执行 yo xxx

今天的文章定制脚手架_万能脚手架分享到此就结束了，感谢您的阅读。