脚手架工具Yeoman和Plop的简单使用

文章内容输出来源：拉勾教育前端高薪训练营

Yeoman

Yeoman常规使用步骤

• 明确你的需求
• 找到合适的Generator
• 全局范围安装找到的Generator
• 通过yo运行对应的Generator
• 通过命令行交互填写选项
• 生成你所需要的项目结构

自带generator演示

# 全局安装yeoman
$ yarn global add yo
# or
$ npm install yo --global

# 安装对应的generator
$ yarn global add generator-node
# or
$ npm install generator-node --global

# 通过yo在指定目录下运行generator
$ yo node

编写一个Generator

Generator名称必须是generator-name

Generator目录基本结构

generator-sample
├── generators // 生成器目录
│ ├── app // 默认生成器目录
│ └── index.js // 默认生成器实现，此文件为Generator的核心入口。
│ └── component // 其他生成器目录
│ └── index.js // 其他生成器实现
└── package.json // 模块包配置文件

Generator创建流程

$ mkdir 目录
$ cd 到目录下
$ yarn init
$ yarn add yeoman-generator

编写app/index.js

 const Generator = require('yeoman-generator')

 module.exports = class extends Generator {
   prompting () {
     // Yeoman自动在生成文件阶段调用此方法
     // 在此方法中可以调用父类的prompt()方法发出对用户的命令行询问
     return this.prompt([
       {
         type: 'input',
         name: 'project-name',
         message: 'Your project name',
         default: this.appname,
       }
     ])
     .then(answers => {
       this.answers = answers
     })
   }

   writing () {
     const templates = [
       'public/favicon.ico',
       'public/index.html',
       '.babelrc',
       '.eslintignore',
       '.eslintrc.js',
       '.gitignore',
       '.prettierrc.js',
       'package.json',
       'postcss.config.js',
       'README.en.md',
       'README.md',
       'server.js',
       'stylelint.config.js',
       'webpack.common.js',
       'webpack.dev.js',
       'webpack.prod.js',
       'webpack.test.js',
       'src/assets/css/common.less',
       'src/assets/css/commonColor.less',
       'src/assets/img/404.png',
       'src/router/index.js',
       'src/utils/loading.js',
       'src/utils/request.js',
       'src/utils/setBaseUrl.js',
       'src/view/common/Footer.vue',
       'src/view/common/Header.vue',
       'src/view/common/Layout.vue',
       'src/view/common/SliderBar.vue',
       'src/view/exOne/exOne.vue',
       'src/view/exTwo/exTwo.vue',
       'src/App.vue',
       'src/main.js',
     ]
     // 使用模板文件批量写入
     templates.forEach(item => {
      this.fs.copyTpl(
        this.templatePath(item),
        this.destinationPath(item),
        this.answers,
      )
     })
   }
 }

自定义Generator运行流程

$ mkdir 目录
$ cd 到目录下
# yo 生成器的名称，此例为generator-sample
$ yo generator-sample

Plop

Plop一般都是作为项目开发依赖

$ yarn add plop --dev

项目根目录下新建plopfile.js，此文件为plop入口文件，需要导出一个函数，此函数接收plop对象，用于创建生成器任务

plopfile.js，此例中我们以编写一个component任务用于生成特定类型文件的模板

module.exports = plop => {
  plop.setGenerator('component', {
    description: 'create a component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'component name',
        default: 'MyComponent',
      },
    ],
    actions: [
      {
        type: 'add',
        path: 'src/component/{{name}}/{{name}}.js',
        templateFile: 'plop-templates/component.hbs',
      },
      {
        type: 'add',
        path: 'src/component/{{name}}/{{name}}.css',
        templateFile: 'plop-templates/component.css.hbs',
      },
      {
        type: 'add',
        path: 'src/component/{{name}}/{{name}}.test.js',
        templateFile: 'plop-templates/component.test.hbs',
      },
    ],
  })
}

运行

$ yarn plop component