Yeoman

1. 介绍

发音：

• [ˈjəʊmən] , “油门”

作用：

• 创建 generator （生成器，脚手架），执行 generator 生成预定义的项目

功能：

• 向用户询问信息
• 创建预定义好的项目结构
• 安装项目的依赖包

2. 快速开始

2.1. 搭建环境

创建 cli 项目：

mkdir cli
cd cli
npm init -y

目录结构：

cli/
  src/
    generators/create-app/index.js      # generator

    generators/create-app/templates/    # 预定好的项目结构
      src/
        index.js
      package.json

    index.js                            # 入口 

2.2. 创建 generator

安装依赖：

# generator 的基类
npm i yeoman-generator
# v5.6.1

编写 generator：

// cli/src/generators/create-app/index.js

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

class CreateApp extends Generator {
  answers = {
    appname: null,
  };

  /**
   * 1. 问询
   *
   * 参考： https://github.com/SBoudrias/Inquirer.js#objects
   */
  async prompting() {
    this.answers = await this.prompt([
      {
        type: "input",
        name: "appname",
        message: "Your project name",
        default: default: path.basename(this.destinationRoot())
      },
    ]);
  }

  // 2. 复制模板
  writing() {
    // default: './templates'
    const sourceRoot = this.sourceRoot();

    // default: this.env.cwd
    const destinationRoot = this.destinationRoot();

    // 编译并拷贝 templates 下所有内容到 dest 目录，
    // 渲染模板： ejs.render(destinationRoot, this.answers)
    this.fs.copyTpl(sourceRoot, destinationRoot, this.answers);
  }

  // 3. 安装依赖
  install() {
    // 将依赖合并到目标 package.json
    this.addDependencies({
      "yeoman-environment": "^3.9.1",
      "yeoman-generator": "^5.6.1",
      "yo": "^4.3.0",
    });

    this.addDevDependencies({
      "eslint-config-airbnb": "^19.0.4",
      "eslint-plugin-import": "^2.25.3",
    });

    // 修改 package.json 的配置
    this.packageJson.merge({
      scripts: {
        start: 'npm run dev',
      }
    });

    // 设置 node 包管理器为 npm 
    this.env.options.nodePackageManager = 'npm';
  }

  end() {
    this.log('Finished!');
  }

}

module.exports = CreateApp;

2.3. 运行 generator

安装依赖：

npm i yeoman-environment
# v3.9.1

注册并运行 generator ：

// cli/src/index.js

const path = require('path');
const yeoman = require('yeoman-environment');
const env = yeoman.createEnv();

const createAppGenerator = {
  name: 'create-app',
  path: path.resolve(__dirname, './generators/create-app/index.js'),
};

env.register(createAppGenerator.path, createAppGenerator.name, null);

env.run(createAppGenerator.name);

执行 index.js：

node ./cli/src/index.js

3. 参考

• 官网 - https://yeoman.io/ (opens new window)