前端小型脚手架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;
    },
  });
};
  1. 在对应路径下创建模板文件,以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 {}
}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值