plop代码生成器

微生成器：项目中有很多代码是重复的、例如创建 home/Home.tsx home/home.scss home/index.tsx 创建about也有这些文件，就可以使用plop一键生成
脚手架：公司做项目，基本的项目结构是一样的：路由配置、路由拦截、登录认证、基本样式等；使用 plop 就不用每次新建一个项目就拷贝之前的项目，然后修修改改，而是使用命令生成一个基本的项目（还可以对这个基本框架项目进行不断优化迭代）

一、安装依赖

bash 复制代码

npm install --save-dev plop

二、创建模板文件

在项目根目录下新建 plop-templates 文件夹，再创建 page 子文件夹，里面放三个模板文件： page/Dashboard.tsx.hbs page/index.tsx.hbs page/dashboard.scss.hbs 模板内容示例（使用 Handlebars 语法）：

plop-templates/page/Dashboard.tsx.hbs

hbs 复制代码

// Dashboard.tsx.hbs
import React from 'react';
import './dashboard.scss';

const {{pascalCase name}}: React.FC = () => {
  return (
    <div className="{{kebabCase name}}">
      <h1>{{pascalCase name}} Page</h1>
      {/* 你的内容 */}
    </div>
  );
};

export default {{pascalCase name}};

plop-templates/page/index.tsx.hbs

hbs 复制代码

// index.tsx.hbs
export { default } from './{{pascalCase name}}';

plop-templates/page/dashboard.scss.hbs

hbs 复制代码

// dashboard.scss.hbs
.{{kebabCase name}} {
  // 你的样式
}

三、配置 plopfile.js

根目录下创建 plopfile.js 文件

js 复制代码

export default function (plop) {
  plop.setGenerator('page', {
    description: '创建一个新页面',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: '请输入页面名称（如 dashboard）:',
      },
      {
        type: 'input',
        name: 'path',
        message: '请输入页面路径（如 admin）:',
        default: 'pages',
      },
    ],
    actions: [
      {
        type: 'add',
        path: 'src/pages/{{path}}/{{name}}/{{pascalCase name}}.tsx',
        templateFile: 'plop-templates/page/Dashboard.tsx.hbs',
      },
      {
        type: 'add',
        path: 'src/pages/{{path}}/{{name}}/index.tsx',
        templateFile: 'plop-templates/page/index.tsx.hbs',
      },
      {
        type: 'add',
        path: 'src/pages/{{path}}/{{name}}/{{kebabCase name}}.scss',
        templateFile: 'plop-templates/page/dashboard.scss.hbs',
      },
    ],
  });
};

四、添加脚本到 package.json

json 复制代码

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

五执行命令生成模版

bash 复制代码

npm run plop

按提示输入生成文件名称，路径（路径/会在pages下生成名称的文件夹以及里面的几个基础文件）