关于工程化:前端工程化Yeoman-和-Plop

前端工程化

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

工程化是一种布局架构，工具是实现布局架构得伎俩，是工程化的集成

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

为什么要应用工程化

• 应用 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 运行脚手架工作