仅作为拉勾教育的学习记录
前端工程化主要解决的问题
- 传统语言或语法的弊端
- 无法使用模块化/组件化
- 重复的机械式的工作
- 代码风格的统一和质量保证
- 依赖后端服务的接口支持
- 整体依赖后端项目
工程化本地开发的流程
IMG_6203.PNG
Yeoman是什么
Yeoman是现代化前端项目的脚手架工具，用于生成包含指定框架结构的工程化目录结构。它是整个前端自动化工厂的第一站。
安装Yeoman
使用npm：npm install -g yo
使用yarn：yarn global add yo
下载项目目录模板的Generator
开源社区有非常多的项目目录模板，在命令行输入npm install generator-fountain-webapp或yarn add generator-fountain-webapp安装项目模板
Yeoman 使用步骤总结
- 明确你的需求
- 找到合适的Generator
- 全局安装找到的Generator
- 通过yo 运行对应的Generator
- 通过命令行交互填写选项
- 生成所需要的项目结构
自定义Generator
- 本质上就是创建一个npm 的模块
- yomen的generator的必须是 generator-<name>的格式
Generator基本的目录
image.png
创建步骤
- 创建一个生成器模板
mkdir generator-sample - 进入generator-sample文件夹
cd generator-sample - 初始化package.json 文件
yarn init || npm init - 安装yeoman提供的生成器基类，此基类提供了一些工具函数
yarn add yeoman-generator - 根据generator的基本目录，去创建generator/app/index.js
- index.js作为Generator的核心输入
- 需要导出一个继承自Yeoman Generator 的类型
- Yeoman Generator 在工作的时候会自动调用我们在此类型中定义的一些生命周期方法
- 我们可以在这个文件中通过父类提供的一些工具方法实现一些功能，比如文件写入
// index.js
const Generator = require('yeoman-generator')
module.exports = class extends Generator {
writing(){
// Yeoman 自动在生成文件阶段调用此方法
// 我们这里尝试往项目目录中写入文件
this.fs.write(
this.destinationPath('temp.txt')
Math.random().toString()
)
}
}
- 然后通过
yarn link的方式把这个模块连接到全局，使之成为一个全局模块包 - 可以在项目里通过
yo sample来使用这个generator
根据模板创建文件
- 在app文件夹下面生成一个templates 目录，在目录下放入要生成的模板
- 在templates 下面创建一个foo.txt 模板文件
- 在index.js 中读写文件的操作，也可以改成通过模板方式写入文件到目标目录
- 相对于手动创建每个文件，模板的方式大大提高了效率
// index.js
// 通过copyTpl 写入文件，该方法接收三个参数(模板文件的路径，输出文件的路径，模板数据的上下文)
const Generator = require('yeoman-generator')
module.exports = class extends Generator {
writing(){
// 模板文件路径
const tmpl = this.templatePath('foo.txt')
// 输出文件路径
const output = this.destinationPath('foo.txt')
// 模板数据上下文
const context = { title: 'Hello world~', success: false }
this.fs.copyTpl(tmpl, output, context)
}
}
// foo.txt
这是一个模板文件
内部可以使用EJS模板标记输出数据
例如： <%= title %>
其他的EJS语法也支持
<% if (success) { %>
哈哈哈
<% }%>
接收用户的输入
- Yeoman 在询问用户环节会自动调用
prompting方法，在此方法中可以调用父类的prompt()方法发出对用户的命令行询问
// index.js
const Generator = require('yeoman-generator')
module.exports = class extends Generator {
prompting(){
return this.prompt([
type: 'input',
name: 'name',
message: 'Your project name',
default: this.appname // appname 为项目生成目录名称
]).then(answers => {
// 用户输入的结果
// answers => { name: 'user input value'}
this.answers = answers
})
}
writing(){
// 模板文件路径
const tmpl = this.templatePath('foo.txt')
// 输出文件路径
const output = this.destinationPath('foo.txt')
// 模板数据上下文
const context = this.answers // context 编程用户的回答内容
this.fs.copyTpl(tmpl, output, context)
}
}
Vue Generator 案例
步骤和上面创建方式大致相同，下面只说需要注意的点
- 把我们需要创建的项目目录结构copy到templates目录下
- 把templates 可能会发生变化的地方通过模板引擎语法的方式去修改一些，例如 README.md 中的项目名称
- 在writing的时候通过数组形式写入文件
writing(){
// 文件的相对路径
const templates = [
'src/main.js'
'.gitignore'
]
templates.forEach(item => {
this.fs.copyTpl(
this.templatePath(item),
this.destinationPath(item),
this.answers
)
})
}
- 如果想直接输出模板下面的模板标记 只需要在模板标记的
<%后面多加个%,例如<%% BASE_URL %>
发布Generator
- 实际就是发布npm 模块
- 首先把本地开发的generator 托管到公开的仓库
- 在项目根目录下，通过
yarn或者npm publish进行发布 - 如果报出淘宝镜像不允许发布的错误只需要更改一下要发布的镜像
yarn publish --registry= https://registry.yarnpkg.com
以上是Yeoman的全部介绍，下面再去记录下plop的一些简要内容
Plop 小而美的脚手架工具
- 主要创建项目中特定类型的小工具
yarn plop components
Plop具体使用
- 安装plop
yarn add plop --dev - 在项目根目录创建
ploplfile.js文件
// plop 入口文件，需要导出一个函数
// 此函数接收一个plop对象，用于创建生成器任务
mudule.exports = plop => {
plop.setGenerator('component',{
description : ' create a component',
prompts: [
{
type: 'input',
name: 'name'，
message: 'component name'，
default: 'MyComponent'
}
],
actions: [
{
type: 'add',
path: 'src/components/{{ name }}/{{ name }}.js'
templateFile: 'plop-templates/component.hbs'
},
{
type: 'add',
path: 'src/components/{{ name }}/{{ name }}.css'
templateFile: 'plop-templates/component.css.hbs'
}
]
})
}
- 在项目根目录创建plop-templates文件夹，在下面创建component.hbs
//component.hbs
import React form 'react'
export default () => {
<div className="{{name}}">
<h1>{{name}}Component</h1>
</div>
}
可以在plop-templates文件夹下创建不同的文件，生成模板，例如再去创建一个 component.css.hbs
然后回到ploplfile.js中添加多个action
- 回到命令行 用过yarn 启动 prop
yarn plop component
脚手架的工作原理
mkdir sample-scaffoldingcd sample-scaffoldingyarn init- 在
package.json里面加上bin: cli.js配置 - 添加cli.js 文件，然后编写内容
#!/user/bin/env node
// Node CLI应用文件入口文件必须要这样的文件头
// 如果Linux 或者MacOS 系统下还需要把文件的读写权限为755
// 具体就是通过 chomd 755 cli.js 实现修改
// 实现脚手架的工作过程
// 1. 通过命令行交互询问用户问题
// 2. 根据用户回答的结果生成文件
// node中发起命令行交互 我们使用inquirer模块
// yarn add inquirer
const fs = require('fs')
const path = require('path')
const inquirer = require('inquirer')
const ejs = require('ejs')
inquirer.prompt([
{
type: 'input',
name: 'name',
message: 'Project name ?'
}
]).then(anwsers =>{
console.log(anwsers)
// 有了问答之后考虑动态的去生成项目文件，一般根据模板生成
// 模板目录
const tmplDir = path.join(__dirname, 'templates')
// 目标目录
const destDir = process.cwd()
// fs读取模板目录下的文件，把文件全部输出到目标目录
fs.readdir(tmplDir,(err, files)=>{
if (err) throw err
files.forEach(file => {
console.log(file)
// 通过模板引擎渲染文件，yarn add ejs
ejs.renderfile(path.join(tmplDir,file),anwsers,(err,result)=>{
if(err) throw err
console.log(result)
// 将模板写入目标路径
fs.writeFileSync(path.join(destDir,file),result)
})
});
})
})
- 通过yarn link 的方式把这个模块link到全局
网友评论