最通用的脚手架工具Yeoman

介绍

Yeoman官方介绍说是用于创造现代化的web应用的脚手架工具

不同于vue-cli，Yeoman更像是一个脚手架运行平台，我们可以通过yeoman搭配不同的generator，去创建任何类型的项目，也可以通过创建我们自己的generator，从而去定制我们自己的前端脚手架

在很多专注于框架开发的人眼中，Yeoman过于通用，不够专注，所以更愿意使用vue-cli等之类的脚手架

基本使用

1.全局安装

环境为node 和npm 

安装yarn global add yo

安装对应generator模块配合使用

安装 yarn global add generator-node

2.创建一个node模块的项目使用

mkdir yeoman

cd yeoman

yo node

2.可以在项目的基础上生成一些子级的文件

如：在项目中加入eslint等

例子： 在上述项目中添加cli，使之变为cli应用

yo node:cli

会在package.json末尾添加bin属性（文件入口）

并在lib中添加cli.js文件

安装依赖后，link到全局  yarn link

此时运行 yeoman --help 会得到命令提示和你创建项目的信息

并不是每一个generator都有子级的generator，根据官方文档来查看

node的generator提供了下面几种子级的生成器

3.创建一个自己的生成器

特定的目录结构

特定的模块名称 generator-name

mkdir generator-smaple

cd generator-smaple

yarn init

yarn add yeoman-generator 安装generator基础模块

app下面index.js为入口文件，返回一个继承自yeoman-generator的类型

在运行过程中yeoman 会自动执行yeoman-generator的生命周期方法

prompting，询问用户

writing，写入时

可以创建模版

在app文件夹中创建templates文件夹，里面支持ejs语法

const Generator = require('yeoman-generator')
module.exports = class extends Generator {
    prompting(){
        return this.prompt([
            {
                type: 'input',
                name: 'name',
                message: 'Your project name',
                default: this.appname
            },
            {
                type: 'input',
                name: 'title',
                message: 'Your project title',
                default: this.projectname
            }
        ]).then(answer=>{
            // answer => { name: user, inputValue }
            Object.assign({},)
        })
    }
    writing() {
        // this.fs.write(
        //     this.destinationPath('temp.txt'),
        //     Math.random().toString()
        // )
        
        // 通过模版方式写入文件到目标目录

        // 模版文件路径
        const templ = this.templatePath('foo.txt')
        // 输出目标路径
        const output = this.destinationPath('foo.txt')
        // 模版数据上下文
        const context = this.answer

        this.fs.copyTpl(templ,output,context)
    }
}

4.创建一个vue的generator

创建目录

mkdir generator-tdn-vue

cd generator-tdn-vue

初始化并安装基类

yarn init

yarn add yeoman-grnerator

创建基本目录

将准备好的源文件放入模版文件夹中

把可能发生变化的地方用模版引擎的方式去挖坑，用于之后用户填入修改

把每一个文件都通过模板转换到目标路径

通过for循环把每一个模版生成到对应的文件

yarn link 软连接到全局

这时可创建新项目测试一下

mkdir my-proj

cd my-proj

yo tdn-vue

即可完成

5.发布generator

在GitHub上创建仓库并上传

yarn publish 发布

如果没有账号请申请再发布

如果问淘宝镜像，请用 yarn publish --registry=https://registry.yarnpkg.com

如果第一次注册，请邮箱验证