前端小型脚手架plop

前端小型脚手架plop

简介

plop是一个轻量级的项目构建工具，plop可以通过命令行去生成、处理文件模板代码等。

使用场景

项目的每个模块的结构骨架都非常相似，引入模版内容相同就可以使用Plop来实现自动化了，Plop旨在根据模板文件自动化创建组件。

plop安装

要将plop安装到全局环境

npm i plop -g

如何使用

1. 在项目根目录中新建一个plopfile.js文件

module.exports = plop => {
  // 这里的 c 是一个自己设定的名字，在执行命令行的时候会用到
  plop.setGenerator('c', {
    // 这里是对这个plop的功能描述
    description: '创建一个组件，包含 html， ts， less 文件',
    prompts: [
      {
        // 问题的类型
        type: 'input',
        // 问题对应得到答案的变量名，可以在actions中使用该变量
        name: 'componentName',
        // 在命令行中的问题
        message: '请输入要新建的组件的名称：',
        // 问题的默认答案
        default: 'test'
      },
      {
        type: 'input',
        name: 'componentPath',
        message: '请输入要新建的组件的路径（前置路径为src/app/pages/）',
        default: '',
      },
    ],
    actions: data => {
      // 输入的要新建的组件的地址
      const componentPathInput = data.componentPath;
      // 输入的要新建的组件的名称
      const componentNameInput = data.componentName;
      // 文件中需要 export 的组件的名称
      const exportComponentName = componentNameInput
        .replace(/[^A-Za-z0-9]/g, ' ')
        .split(' ')
        .map(item => item.toLowerCase().replace(item[0], item[0].toUpperCase()))
        .join('');
      // 要新建的组件的地址
      const path = `src/app/pages/${componentPathInput ? componentPathInput + '/' : ''}`;

      // 要新创建的文件路径
      const tsFilePath = `${path}${componentNameInput}.component.ts`;
      const htmlFilePath = `${path}${componentNameInput}.component.html`;
      const lessFilePath = `${path}${componentNameInput}.component.less`;

      const actions = [
        {
          // 操作类型，这里是添加文件
          type: 'add',
          // 添加的文件的路径
          path: tsFilePath,
          // 模板文件的路径
          templateFile:
            'D://workload/plop-template/angular/component/template.component.ts',
          // 用来替换模板中的 {{xxx}} 变量
          data: {
            name: componentNameInput,
            exportComponentName,
          }
        },
        {
          type: 'add',
          path: htmlFilePath,
          templateFile:
            'D://workload/plop-template/angular/component/template.component.html',
          data: {
            name: componentNameInput,
            exportComponentName,
          }
        },
        {
          type: 'add',
          path: lessFilePath,
          templateFile:
            'D://workload/plop-template/angular/component/template.component.less',
          data: {
            name: componentNameInput,
            exportComponentName,
          }
        },
      ];
      return actions;
    },
  });
};

2. 在对应路径下创建模板文件，以template.component.ts为例

import {
  Component,
  OnInit,
  OnDestroy,
  OnChanges,
  SimpleChange,
} from '@angular/core';


@Component({
  selector: 'app-{{name}}',
  templateUrl: './{{name}}.component.html',
  styleUrls: ['./{{name}}.component.less'],
})
export class {{exportComponentName}}Component
  implements OnInit, OnDestroy, OnChanges
{
  constructor() {}

  ngOnInit(): void {}

  ngOnChanges(changes: { [propKey: string]: SimpleChange }) {}

  ngOnDestroy(): void {}
}