Plop 自动化创建组件和路由

plop 一个小而美的脚手架工具，我们可以在自己的项目中来引入这个工具，通过简单的命令询问方式，就帮助我们把新增的组件，按照我们项目制定的结构自动生成，从而不用再去通过复制一个现有的组件修改名称，然后还需要去增加对应的路由规则。有了plop, 让我们的开发变的更简单

plop 初体验

• 安装plop

npm i plop -D

• 在项目的根文件下创建plopfile.js

//  Plop 入口文件 需要导出一个函数
// 此函数接收一个 plop 对象，用于创建生成器任务

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/components/{{name}}/{{name}}.vue', // 这里的name就是上面定义的键
        templateFile: 'plop-templates/component.hbs'
      }
    ]
  })
}

• 根目录下创建plop-templates/component.hbs 指定模板

<template>
  <div>{{name}} component</div>
</template>

<script>
export default {
  name: '{{name}}'
}
</script>

<style scoped lang="scss">

</style>

• package.json 中添加脚本

"scripts": {
	"plop": "plop"
}

• 终端中运行命令， 其中"component" 是在polopfile.js中定义的生成器名称

npm run plop component

运行结果：

生成了我们新增的组件Test.vue

plop 根据用户不同的选择来生成不同的目录结构

有时候我们需要根据不同的需求执行不同的action 任务，此时上面用到的配置就不足以支持了，我们就需要优化一下了

module.exports = plop => {
  plop.setGenerator('component', {
    description: 'create a component',
    prompts: [
      
      {
        type: 'input',
        name: 'name', // 作为接收用户输入结果的健
        message: 'component name',
        default: 'MyComponent'
      },
      {
        type: 'comfirm',
        name: 'wantRouter',
        message: 'Do you want to generate router ? ',
        default: 'Y'
      }
      
    ],
    actions: function (answer) {
      let actions = []
      actions.push({
        type: 'add', // 代表添加文件
        path: 'src/components/{{camelCase name}}/{{camelCase name}}.vue', // 这里的name就是上面定义的健
        templateFile: 'plop-templates/component.hbs'
      })
      if (answer.wantRouter.toLowerCase() === 'y') {
        actions.push({
            type: 'add',
            path: 'src/router/components/routers/{{camelCase name}}Router.js',
            templateFile: 'plop-templates/router.js.hbs'
        })
        // 修改已存在文件的内容
        actions.push({
          type: 'modify',
          path: 'src/router/components/mainPageRouter.js',
          pattern: /(\/\/ append import)/gi,
          // camelCase 用来将输入的名称转化为驼峰
          template: "import {{camelCase name}}Router from './routers/{{camelCase name}}Router'\r\n$1"
        })
        actions.push({
          type: 'modify',
          path: 'src/router/components/mainPageRouter.js',
          pattern: /(\/\/ append new router)/gi,
          // camelCase 用来将输入的名称转化为驼峰
          // $1 用于在结束的时候添加匹配的占位，用于下次使用
          template: ',\r\n\  {{camelCase name}}Router$1'
        })
      }
      return actions
    }
  })
}

我们增加了一个确认是否需要增加对应的路由，如果需要的话，就会在路由文件夹下新增一个路由的配置，并且将它添加到路由规则中。

我们在终端中执行脚本

结果，可以发现新增了一个路由文件

并且，在指定的文件中添加了这个路由

总结

比较两种方式，第二种方式更符合我们的日常开发