仅作为拉勾教育的学习记录

前端工程化主要解决的问题

传统语言或语法的弊端
无法使用模块化/组件化
重复的机械式的工作
代码风格的统一和质量保证
依赖后端服务的接口支持
整体依赖后端项目

工程化本地开发的流程

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-的格式

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 () => {
  
      {{name}}Component
  
  
}

可以在plop-templates文件夹下创建不同的文件，生成模板，例如再去创建一个 component.css.hbs
然后回到ploplfile.js中添加多个action

回到命令行用过yarn 启动 prop

yarn plop component

脚手架的工作原理

mkdir sample-scaffolding
cd sample-scaffolding
yarn init
在package.json里面加上bin: cli.js 配置
添加cli.js 文件，然后编写内容

#!/usr/bin/env node

// Node CLI应用文件入口文件必须要这样的文件头
// 如果Linux 或者MacOS 系统下还需要把文件的读写权限为755
// 具体就是通过 chmod 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到全局

Yeoman的使用