用Yeoman搭建我自己的项目脚手架

新建一个项目，通常需要进行各种配置，比如webpack配置、eslint配置、各种通用库的安装和配置等等，如果每次新建都要重新搞一遍会比较麻烦，因此搭建一个自己常用的项目脚手架便很有必要。

就像vue-cli一样，一个vue create my_project命令就可以生成项目结构，并内置了webpack等相关基础配置，开箱即用，美滋滋。

下面介绍我如何使用Yeoman工具来搭建自己的项目脚手架。

一、安装

npm install -g yo
npm install -g generator-generator

全局安装yo，使用yo命令来执行脚手架yo <name>，脚手架项目的名称是generator-打头，用yo执行的时候不带generator-打头。如generator-jeyson脚手架项目，执行就是yo jeyson

全局安装创建脚手架生成项目generator-generator，通过yo generator可生成构建脚手架的项目。

二、使用

1、使用yo命令执行generator脚手架，生成构建脚手架的项目

yo generator

# 弹出配置问题
# Your generator name (generator-my-projects) 脚手架名称，如：generator-jeyson-koa
# Description 描述，如：this is a jeyson's koa project
# Project homepage url 项目地址，如项目的github地址，没有可以留空
# Author's Name 作者名，jeyson
# Author's Email 作者邮箱，123@163.com
# Author's Homepage 作者首页，ljclucky.com
# Package keywords (comma to split) 包关键字，逗号分隔 koa,webpack,mongoose,redis
# Send coverage reports to coveralls 是否发送报告 Y
# Enter Node versions (comma separated) node版本 12.14
# GitHub username or organization
# Which license do you want to use?  协议，MIT

配置完成后在当前目录下生成项目结构：

其中最核心的就是generators文件夹。

• generators/app/templates 里面用于存放我的项目模板文件。

• generators/app/index.js 脚手架项目的入口文件，里面会触发一些生命周期：

  1. initializing - 初始化方法（检查当前项目状态、获取配置等）
  2. prompting - 提示用户输入选项的地方
  3. configuring - 保存配置（创建.editorconfig文件和其他元数据文件）
  4. default - 如果方法名称与优先级不匹配，则会将其推送到该组
  5. writing - 执行文件写操作，即项目文件写入文件系统中
  6. conflicts - 处理冲突的地方（内部使用）
  7. install - 运行安装的位置（npm、bower）
  8. end - 最后执行，可清除临时文件

2、将自己的项目复制到模板文件下

将generators/app/templates目录下的dummyfile.text文件删除。

然后把自己的项目中除了dist、node_modules文件夹外所有工程文件复制到generators/app/templates目录下，如我的koa项目：

3、配置generator入口文件

具体可查看文档generator部分，完整api

在文件修改配置：

'use strict';
const Generator = require('yeoman-generator');
const chalk = require('chalk');
const yosay = require('yosay');

module.exports = class extends Generator {
  // 用脚手架生成自己的项目的时候提示信息
  prompting() {
    this.log(
      yosay(`Welcome to the kryptonian ${chalk.red('generator-jeyson-koa')} generator!`)
    );

    const prompts = [
      {
        type: 'confirm', // 确认类型，[Y/n]
        name: 'someAnswer', // 提示名称
        message: 'Would you like to enable this option?', // 提示文字
        default: true // 默认值
      },
   // {
     // type: 'input', // 输入类型
     // name: 'author',
     // message: '请输入项目作者',
     // default: ''
   // }
    ];

    return this.prompt(prompts).then(props => {
      this.props = props;
    });
  }

  writing() {
    this.fs.copy(
      // this.templatePath('dummyfile.txt'),
      // this.destinationPath('dummyfile.txt')
      // 将上面的修改成下面这样，意思是在执行脚手架生成的时候
      // 将templates模版下的所有文件复制到当前路径下
      // 具体可查看文档 https://yeoman.github.io/generator/actions_fs.html#.copyTemplate
      this.templatePath('**'),
      this.destinationPath('./'),
      {
        globOptions: {
          dot: true, // 意为匹配带.的文件
          nodir: true // 注：该选项意为不匹配空目录，强制为true，可以不写
        }
      }
    );
  }

  install() {
    // npm安装所有依赖
    this.npmInstall();
  }
};

三、发布

上述都配置完成后，即可进行发布了。

1、正式发布之前，先在本地进行测试

确认我们的命令行处在当前的脚手架项目目录下，然后输入命令：

npm link
# 如果要解除 用 npm unlink

该命令可以把我们当前所在的脚手架项目链接到全局node_modules中，然后我们新建一个文件夹demo，进入该目录，输入下面的命令：

yo jeyson-koa
# yo your-project 即上面设置的脚手架名称，不带前面的generator-

执行该命令，它会从全局的node_modules中找到之前链接的脚手架项目，然后在当前demo路径下，执行该项目，即可生成你的项目。

运行项目，测试是否正常运行。

2、将项目脚手架发布到npm仓库中

本地测试完成之后，就可以发布到npm线上仓库中了。

首先要注册有npm账号，然后在命令行中登陆：

npm login

然后进入到脚手架项目中，使用命令：

npm publish

注：在发布之前，需要确认脚手架项目package.json中的version要给个1.0.0以上的版本。

发布成功后，即可在npm官网上搜索到这个包，这样在任何地方都能下载和使用该脚手架了，如：

# 全局安装脚手架项目
npm install -g generator-jeyson-koa
# 通过yo命令运行脚手架
yo jeyson-koa