前端工程化Yeoman 和 Plop

前端工程化

遵循必定标准和规范，经过工具去提升效率，下降成本的一种手段css

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

Powered by Node.js 工程化经过Node驱动前端

为何要使用工程化vue

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

一些成熟的工程化集成node

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

本质做用：建立项目基础结构，提供项目规范和约定react

约定体如今git

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

有些IDE建立项目的过程能够看做是工程化，例如Android Studiogithub

经常使用脚手架web

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

Yeoman

建立现代化web应用的脚手架工具vue-cli

全局范围安装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运行脚手架任务