前端工程化Yeoman 和 Plop

mcgee0731

前端工程化

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

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

Powered by Node.js 工程化通过Node驱动

为什么要使用工程化

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

一些成熟的工程化集成

image.png

脚手架工具(前端工程化的发起者)

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

约定体现在

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

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

常用脚手架

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

Yeoman

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

全局范围安装yo

  • yarn global add yonpm i yo -g

安装对应的generator 例如:

  • yarn global add generator-nodenpm 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满足结构
image.png

自定义的名称必须是 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运行脚手架任务
阅读 140

不会做饭的程序猿不是一个好厨子

43 声望
2 粉丝
0 条评论
你知道吗?

不会做饭的程序猿不是一个好厨子

43 声望
2 粉丝
宣传栏