開(kāi)發(fā)時(shí)，經(jīng)常會(huì)需要拷貝原有的目錄結(jié)構(gòu)和代碼，如果有腳手架幫助做這些事，可以省去不少工作量。yeoman的generator就可以幫助我們構(gòu)建這樣的腳手架。

前期準(zhǔn)備

首先，確保本地開(kāi)發(fā)環(huán)境安裝了Node和NPM。需要注意Node的版本，要求在4.0以上，NPM的版本也需要和Node版本相匹配。另外，高版本的Node會(huì)支持更多的ES6特性，方便使用新語(yǔ)法來(lái)書(shū)寫(xiě)代碼。

接著，全局安裝yeoman。

npm install yeoman -g

yeoman支持為自己的腳手架建立一個(gè)generator，通過(guò)運(yùn)行g(shù)enerator來(lái)生成腳手架。

建立項(xiàng)目

首先，創(chuàng)建項(xiàng)目文件夾，文件夾名格式為generator-name，其中name是需要?jiǎng)?chuàng)建的generator的名字。比如我需要?jiǎng)?chuàng)建的是一個(gè)webpack用法示例的項(xiàng)目腳手架，文件夾取名為generator-webpack-example。

然后，初始化項(xiàng)目，并根據(jù)提示輸入項(xiàng)目信息。

npm init

接著，創(chuàng)建項(xiàng)目所需的結(jié)構(gòu)。使用yeoman執(zhí)行g(shù)enerator時(shí)（比如yo webpack-example），yeoman默認(rèn)會(huì)去執(zhí)行app目錄下的入口文件，代碼需要放在app中。并且命令會(huì)從app中的templates目錄讀取模板。詳細(xì)配置參考官方文章WRITING YOUR OWN YEOMAN GENERATOR。

最后項(xiàng)目的結(jié)構(gòu)如下。

- app
 |- templates
 |- index.js
 |- prompts.js
- package.json
- README.md

模板結(jié)構(gòu)

templates目錄用來(lái)存放產(chǎn)出文件的模板。腳手架的實(shí)現(xiàn)使用了lodash，所以模板直接使用lodash提供的模板語(yǔ)法。templates目錄中的結(jié)構(gòu)如下。

- templates
 |- index_tmpl.html
 |- index_tmpl.js
 |- package_tmpl.json
 |- README_tmpl.md
 |- webpack_tmpl.config.js

代碼實(shí)現(xiàn)

index.js是主文件，用來(lái)實(shí)現(xiàn)腳手架的具體操作。其中class中使用的各方法是yeoman的generator提供的函數(shù)鉤子，針對(duì)功能填充到對(duì)應(yīng)的鉤子函數(shù)中即可。可用的鉤子方法可參考GENERATOR RUNTIME CONTEXT。

首先，安裝文件依賴的模塊。

npm install yeoman-generator chalk yosay lodash deep-extend mkdirp -S

然后，使用Generator的API實(shí)現(xiàn)腳手架。

'use strict';
const Generator = require('yeoman-generator');
const chalk = require('chalk');
const yosay = require('yosay');
const path = require('path');
const _ = require('lodash');
const extend = require('deep-extend');
const mkdirp = require('mkdirp');

const prompts = require('./prompts');

module.exports = class extends Generator {

  initializing() {

    this.props = {};
  }

  prompting() {

    // 打招呼
    this.log(yosay(
      'Welcome to the ' + chalk.red('generator-webpack-example') + ' generator!'
    ));

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

  writing() {

    if (path.basename(this.destinationPath()) !== this.props.projectName) {
      this.log(
        'Your generator must be inside a folder named ' + this.props.projectName + '\n' +
        'I\'ll automatically create this folder.'
      );
      mkdirp(this.props.projectName);
      this.destinationRoot(this.destinationPath(this.props.projectName));
    }

    // 寫(xiě)README.md
    const readmeTpl = _.template(this.fs.read(this.templatePath('README_tmpl.md')));
    this.fs.write(this.destinationPath('README.md'), readmeTpl({
      projectTitle: this.props.projectTitle,
      projectDesc: this.props.projectDesc
    }));

    // 寫(xiě)package.json
    const pkg = this.fs.readJSON(this.templatePath('package_tmpl.json'), {});
    extend(pkg, {
      devDependencies: {
        "webpack": "^3.0.0"
      }
    });
    pkg.keywords = pkg.keywords || [];
    pkg.keywords.push('generator-webpack-example');

    pkg.name = this.props.projectName;
    pkg.description = this.props.projectDesc;
    pkg.main = this.props.projectMain;
    pkg.author = this.props.projectAuthor;
    pkg.license = this.props.projectLicense;

    this.fs.writeJSON(this.destinationPath('package.json'), pkg);

    // 創(chuàng)建dist目錄
    mkdirp('dist');

    // 寫(xiě)index.html
    const indexHtmlTpl = _.template(this.fs.read(this.templatePath('index_tmpl.html')));
    this.fs.write(this.destinationPath('dist/index.html'), indexHtmlTpl({
      projectName: this.props.projectName
    }));

    // 創(chuàng)建src目錄
    mkdirp('src');

    // 寫(xiě)webpack.config.js
    this.fs.copy(
      this.templatePath('webpack_tmpl.config.js'),
      this.destinationPath('webpack.config.js')
    );

    // 寫(xiě)index.js
    this.fs.copy(
      this.templatePath('index_tmpl.js'),
      this.destinationPath('src/index.js')
    );
  }
};

prompts.js用于存放輸入信息指引的配置。

module.exports = [
  {
    type: 'input',
    name: 'projectName',
    message: 'Please input project name (webpack-example):',
    default: 'webpack-example'
  },
  {
    type: 'input',
    name: 'projectTitle',
    message: 'Please input project title (webpack示例):',
    default: 'webpack示例'
  },
  {
    type: 'input',
    name: 'projectDesc',
    message: 'Please input project description:'
  },
  {
    type: 'input',
    name: 'projectMain',
    message: 'Main file (src/index.js):',
    default: 'src/index.js'
  },
  {
    type: 'input',
    name: 'projectAuthor',
    message: 'Author (yanyinhong):',
    default: 'yanyinhong'
  },
  {
    type: 'list',
    name: 'projectLicense',
    message: 'Please choose license:',
    choices: ['MIT', 'ISC', 'Apache-2.0', 'AGPL-3.0']
  }
]

運(yùn)行

項(xiàng)目還沒(méi)有通過(guò)NPM發(fā)布，可以先將項(xiàng)目鏈接到全局Node環(huán)境中。

npm link

然后，嘗試執(zhí)行命令yo generator-name。比如：

yo webpack-example

根據(jù)提示步驟進(jìn)行項(xiàng)目的構(gòu)建：

? Please input project name (webpack-example): webpack-example
? Please input project title (webpack示例): webpack示例
? Please input project description:
? Main file (src/index.js): src/index.js
? Author (yanyinhong): yanyinhong
? Please choose license: MIT
Your generator must be inside a folder named webpack-example
I'll automatically create this folder.
   create README.md
   create package.json
   create dist\index.html
   create webpack.config.js
   create src\index.js

一個(gè)項(xiàng)目構(gòu)建完成了！