Plop小型脚手架工具使用说明

小型的脚手架工具, 用于快速创建文件

• 具体使用步骤

  1. 安装 yarn add plop --dev
  2. 在项目的根目录下新建入口文件 plopfile.js
  3. 在plopfile.js文件中定义脚手架任务
  4. 编写用于生成特定类型文件的模板
  5. 运行脚手架 yarn plop component(生成器的名称)

  // 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/component/{{name}}/{{name}}.js', //这里的name表示上一步命令行中输入的值
          templateFile: 'plop-templates/component.hbs', // 母版文件
        },
        {
          type: 'add', // 添加一个全新的文件
          path: 'src/component/{{name}}/{{name}}.css', //这里的name表示上一步命令行中输入的值
          templateFile: 'plop-templates/component.css.hbs', // 母版文件
        },
        {
          type: 'add', // 添加一个全新的文件
          path: 'src/component/{{name}}/{{name}}.js', //这里的name表示上一步命令行中输入的值
          templateFile: 'plop-templates/component.js.hbs', // 母版文件
        }
      ]
    })
  }

使用

• 生成页面

• 生成组件