前端工程化

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

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

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