前端工程化Yeoman 和 Plop

前端工程化

遵循一定标准和规范，通过工具去提高效率，降低成本的一种手段

工程化是一种规划架构，工具是实现规划架构得手段，是工程化的集成

为什么要使用工程化

使用ES6存在兼容问题
使用Less、Sass、PostCSS增强css编程性存在运行环境不支持
使用模块化方式提高项目可维护性，运行环境不直接支持
部署上线前"手动"压缩代码资源，部署过程"手动"上传代码到服务器
多人协作开发，无法硬性统一大家代码风格，从仓库pull回得代码质量无法保证、

一些成熟的工程化集成

脚手架工具（前端工程化的发起者）

本质作用：创建项目基础结构，提供项目规范和约定

约定体现在

相同的组织结构
相同的开发范式
相同的模块依赖
相同的工具配置
相同的基础代码

有些IDE创建项目的过程可以看作是工程化，例如Android Studio

常用脚手架

create-react-app ， vue-cli ， angular-cli 根据信息创建对应项目基础结构适用于自身服务的框架
Yeoman 通用型项目脚手架工具
Plop 项目中创建特定类型文件

Yeoman

创建现代化web应用的脚手架工具

全局范围安装yo

yarn global add yo ， npm i yo -g

安装对应的generator 例如：

yarn global add generator-node ， npm i generator-node -g

通过yo运行generator

yo node
* 填写脚手架内容

Sub Generator

在已有的项目基础上创建特定类型文件

如项目上添加README，ESlint，Bable配置文件，用生成器自动生成

例如：在generator-node创建的项目里添加node子集生成器cli，并不是都有子集生成器，根据官网查看

yo node:cli            创建cli应用所需要的文件
my-module --help

Yeoman使用步骤总结

明确需求
找到合适的Generator
全局范围安装找到的Generator
通过yo 运行对应的Generator
通过命令行交互填写选项
生成你所需要的项目结构
找到对应generator

例如：创建一个网页应用webapp

 * yarn global add generator-webapp
 * yo webapp   (类似于 yo node 安装generator-node)

自定义Generator

基于Yeoman搭建自己的脚手架，本质上Generator就是一个NPM模块

自定义的Generator满足结构

自定义的名称必须是 generator-name

接收用户输入动态数据

通过命令行交互方式去询问使用者，从而得到使用者想要的项目脚手架

const Generator = require('yeoman-generator')

module.exports = class extends Generator{

  prompting(){

    //Yeoman 在询问用户环节会自动调用此方法
    //在此方法中可以调用父类的 prompt() 方法发出对用户的命令行询问

    return this.prompt([ //数组的每项都是问题对象

      {
        type:'input', //输入方式接收用户提交信息
        name:'title',  //键
        message:'Your project name', //界面给用户提示问题
        default: this.appname //父类中自动帮我们拿到的当前项目生成目录文件夹的名字（默认值）
      }

    ])
    .then(answers=>{
      //answers =>{name:'user input value;'} 就是上面的name：title

      this.answers = answers
    })
  }
  writing(){
    
    const tmpl = this.templatePath('bar.html')

    const output = this.destinationPath('bar.html')

    const context = this.answers   //{title:'Hello mc',success:false}修改为this.answers接收用户输入内容为模板上下文

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

yo sample 执行

发布Generator

实际上就是发布一个npm模块

发布要注册npm账号，并邮箱验证
发布命令 yarn publish，输入npm账号密码,输入错误yarn logout可以重新填写
运行失败解决：yarn publish --registry=https://registry.yarnpkg.com
发布到的地址：https://www.npmjs.com/package/xxx

Plop

创建项目中特定类型文件的脚手架工具，类似于Yeoman中的Sub Generator

提高创建重复文件的效率

yarn add plop --dev
根目录添加 plopfile.js 入口文件

plopfile.js介绍

plopfile 需要导出一个函数,此函数接收一个plop对象，用于创建生成器任务

module.exports = prop =>{

  plop.setGenerator('component',{ //参数1：生成器名字，参数2生成器配置选项对象
    description:'create a component',

    prompts:[   //问询交互
      {
        type:'input',
        name:'name', //键
        messsage:'component name', //问题
        default:'MyComponent' //默认答案
      }
    ],

    actions:[ //生成器动作，也就是要生成的文件配置
      {
        type:'add', //添加一个文件
        path:'src/components/{{name}}/{{name}}.js', //添加路径
        templateFile:'src/plop-templates/component.hbs' //模板文件
      }
    ]

  })
}

yarn plop component(生成器名字) 执行plop命令，生成文件

总结

将plop模块作为项目开发依赖安装
在项目根目录下创建一个plopfile.js文件
在plopfile.js文件中定义脚手架任务编写用于生成特定类型文件的模板
通过Plop提供的CLI运行脚手架任务

前端工程化Yeoman 和 Plop