前端工程化
遵循肯定规范和标准，通过工具去提高效率，降低成本的一种伎俩
工程化是一种布局架构，工具是实现布局架构得伎俩，是工程化的集成
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 --helpYeoman应用步骤总结
- 明确需要
- 找到适合的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运行脚手架工作
发表回复