Yeoman量身定制前端脚手架

Yeoman是什么？

Yeoman为何方神圣，说他有三头六臂一点都不夸张。

因为他由三部分组成：yo(脚手架工具)、grunt(等构建工具)、npm(等包管理器)。

官方文档中给他的定位为scaffolding tool，其实就是脚手架工具，可以帮助前端开发人员量身定制化自己的脚手架，省去copy环节。

使用 yeoman generator可以帮助我们构建项目结构、安装依赖等重复性操作，然而已有的generator有时并不能满足需求，所以可以使用yeoman的API来构建自己的生成器。

通过定制好自己的generator之后，只需要几个命令，就可以使用自己的脚手架，并且自动化生成项目文件结构、配置文件、依赖包等。

接下来开始敲黑板、划重点了！！！

配置开发环境

需要安装node.js

安装Yeoman的命令行工具和开发Yeoman生成器的工具 generator-generator

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

初始化项目

yo generator

执行上述命令，执行前，不需要新建文件夹，yo generator会帮我们建好文件夹。Yeoman会在终端提出几个问题，这是一个交互式的配置过程。项目名自己设置，必须以generator-开头，协议选择MIT，协议完成后，Yeoman会自动安装项目依赖。当然可以终止掉自动安装，自己使用cnpm或者yarn进行安装，用了都说好。

yeoman.png

最后生成的项目目录：

generator-vue-test
├ generators
    ├ app
        ├ index.js
        ├ templates
            ├ dummyfile.txt
├ __tests__
    ├ app.js
├ LICENSE
├ README.md
├ package.json

配置

/generators/app/index.js 是Yeoman的配置文件，生成器入口文件，在这里进行我们自己脚手架的配置

generators/app/templates/是默认存放文件的目录，所有模板文件都放在这个目录下，最后生成的脚手架也只有这个文件夹下的内容。

prompting 接受用户输入阶段

module.exports = class extends Generator {
  prompting() {
    // Have Yeoman greet the user.
    this.log(yosay(
      'Welcome to the awe-inspiring ' + chalk.red('generator-downloads') + ' generator!'
    ));
    const prompts = [{
      type: 'confirm',
      name: 'someAnswer',
      message: 'Would you like to enable this option?',
      default: true
    }];
    return this.prompt(prompts).then(props => {
      // To access props later use this.props.someAnswer;
      this.props = props;
    });
  }
};

封装了 inquirer，在终端提供一个交互式的配置过程。可以根据提供的API，进行适当的修改，实现通用的脚手架。

this.appname: 获取当前文件夹名称
this.user.git.name(): 获取全局git用户名
this.user.git.email(): 获取全局git邮箱
this.github.username(): 获取github用户名

      const prompts = [{
          type: 'confirm',
          name: 'someAnswer',
          message: 'Would you like to enable this option?',
          default: true
      },{
          type: 'input',
          name: 'name',
          message: 'Your project name',
          default: this.appname
      },{
          type: 'input',
          name: 'description',
          message: 'description',
      },{
          type: 'input',
          name: 'author',
          message: 'author',
          default: this.user.git.name()
      },{
          type: 'input',
          name: 'email',
          message: 'email',
          default: this.user.git.email()
      }];

这里实现了让用户输入作者、项目名、email。

writing 生成项目目录结构阶段

通过this.fs，可以使用所有文件的方法，只用使用mem-fs editor 模块的接口

writing() {
      this.fs.copy(
          this.templatePath('build/'),
          this.destinationPath('build/')
      );

      this.fs.copy(
          this.templatePath('config/'),
          this.destinationPath('config/')
      );

      this.fs.copy(
          this.templatePath('src/'),
          this.destinationPath('src/')
      );

      this.fs.copy(
          this.templatePath('mock/'),
          this.destinationPath('mock/')
      );

      this.fs.copy(
          this.templatePath('static/.gitkeep'),
          this.destinationPath('static/.gitkeep')
      );

      this.fs.copy(
          this.templatePath('.babelrc'),
          this.destinationPath('.babelrc')
      );

      this.fs.copy(
          this.templatePath('.eslintrc.js'),
          this.destinationPath('.eslintrc.js')
      );

      this.fs.copyTpl(
          this.templatePath('package.json'),
          this.destinationPath('package.json'), {
              title: this.props.name,
              description: this.props.description,
              author: this.props.author,
              email: this.props.email
          }
      );

      this.fs.copy(
          this.templatePath('README.md'),
          this.destinationPath('README.md')
      );

      this.fs.copy(
          this.templatePath('.gitignore'),
          this.destinationPath('.gitignore')
      );

      this.fs.copyTpl(
          this.templatePath('index.html'),
          this.destinationPath('index.html'),
          { title: this.props.name }
      );
  }

copy() vs copyTpl()

他们的第一个参数都是模板文件路径，第二个参数是生成文件路径，不同之处在于copyTpl的第三个参数是一个对象，用于向模板中填充数据。copyTpl使用的是ejs模板引擎。

例如：./templates/index.html的文件内容是：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title><%= title %></title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

this.fs.copyTpl(
    this.templatePath('index.html'),
    this.destinationPath('index.html'),
    {title: 'Templating with Yeoman'}
);

一但generator运行成功，index.html将会编译为：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Templating with Yeoman</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

json也同样适用上面的语法，配置package.json文件可以适应不同的项目。

install 安装依赖

// 3. 安装依赖
install: function (){
    this.npmInstall();
}

安装测试

如果你想观察自己配置的结果，可以使用npm link 命令，相当于全局安装了此脚手架，然后通过新建文件夹，且进入文件夹，运行yo，选择刚刚的脚手架，便可以测试。
例如：

mkdir vue-test && cd vue-test

发布generator

可以将你创建的生成器发布到npm社区，便于自己和其他开发者使用。

generator-test/package.json中的name要在https://www.npmjs.com/没被创建过，才可以发布。

如果没有npm的账号，可以通过npm adduser创建；
如果已有账号，通过 npm login 登陆。

登陆成功之后，在项目的根目录下，运行npm publish就可以发布了。如果更新后重新发布，需要修改package.json文件的版本号。

使用下述命令可以撤销发布，只有在发布包24小时内允许撤销发布的包。

npm unpublish 包名

参考资料

Yeoman官网：http://yeoman.io/

yeoman.jpg