前端工程化之yeoman的使用 (一)

前端工程化之yeoman使用，前面已经使用plop进行文件模板的开发工程化，而对于大型项目脚手架的工程化则yeoman则大名鼎鼎

安装

全局安装yeoman

npm install -g yo

创建

1、创建一个文件夹，命名规则必须为generator-name ，Yeoman要根据这个名字去查询可用的生成器

2、npm init 创建node模块清单package.json文件，当然其中有些是必填的，模板如下：

{
  "name": "generator-name",
  "version": "0.1.0",
  "description": "",
  "files": [
    "generators"
  ],
  "keywords": ["yeoman-generator"],
  "dependencies": {
    "yeoman-generator": ""
  }
}

name必须以generator-开头
files必须是生成器使用的文件和目录的数组（./和generators/注册可用的generator。所以下方的目录结构generators也可以去除）必须是generators而不能是其他名称
keywords 必须包含yeoman-generator，yeoman才能去识别

3、安装yeoman-generator确保最新版本。

npm install --save yeoman-generator

新建目录结构

package.json中files为生成器使用的文件和目录的数组，那么有两种目录结构，一种是generators包含的各个生成器，另一种直接是生成器的数组：

 "files": [
    "app",
    "views"
  ],

一个目录中可能包含多个generator，其中有个默认的必须在app文件夹下

运行

generator分别有两个一个是默认的app一个是views，其中默认的generator必须包含在它必须包含在app（只能叫app）中。

两个generator文件夹内分别新建index.js
app: 继承yeoman-generator并导出一个module

var Generator = require('yeoman-generator');
module.exports = class extends Generator {
    method() {
        this.log('默认generator运行中...');
    }
};

views

var Generator = require('yeoman-generator');
module.exports = class extends Generator {
    method() {
        this.log('view generator运行中...');
    }

};

在你当前generator-welink-cli根目录下运行

npm link

直接运行yo或者直接yo welink-cli

可以看到直接运行不加generator 的名称时，是默认运行app这个默认的generator（app这个generator）

运行指定的generator yo name:generator的名称（yo welink-cli:views）

千里之行
始于足下