plop: 为 admin 系统添加基本的 templates

What/Why 为什么使用这个

• yo
• node-cli
• bun create: ✅ 当前选择

适合项目级别的 templates，可以自由定制，添加

省流：使用 bun create 一键添加 bcl 的模板

# 1. bcl 选择 005-vite-admin-plop
# 2. 添加依赖
yarn add --dev @jswork/plop-utils

全局安装

yarn global add plop

安装相关 utils

yarn add --dev @jswork/plop-utils

项目中的模板文件

.templates
├── modal
│   └── index.tsx
├── resources
│   ├── [id].edit.tsx
│   ├── add.tsx
│   ├── index.tsx
│   └── ui
└── store
    └── index.ts

添加 3 个常用的配置

import { load, metadata } from "@jswork/plop-utils";

export default async function (plop) {
  await load(plop);
  // resource generator
  plop.setGenerator('resource', {
    description: 'Generate a new resource based on templates',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'Resource name please (e.g. posts, users, etc.)'
      }
    ],
    actions: [
      {
        type: 'addMany',
        destination: 'src/pages/admin/{{name}}/',
        base: '.templates/resources',
        templateFiles: '.templates/resources/**',
        data: metadata
      }
    ]
  });

  // modal generator
  plop.setGenerator('modal', {
    description: 'Generate a new modal based on templates',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'Modal name please (e.g. create-post, edit-user, etc.)'
      }
    ],
    actions: [
      {
        type: 'addMany',
        destination: 'src/shared/modals/{{name}}/',
        base: '.templates/modal',
        templateFiles: '.templates/modal/**',
        data: metadata
      }
    ]
  });

  // store generator
  plop.setGenerator('store', {
    description: 'Generate a new store based on templates',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'Store name please (e.g. user, post, etc.)'
      }
    ],
    actions: [
      {
        type: 'add',
        path: 'src/shared/stores/modules/{{dashCase name}}.ts',
        templateFile: '.templates/store/index.ts',
        data: metadata
      }
    ]
  });
}

创建命令 plop resource 生成对应的资源

# 如果没有安装 global 的，可以使用 npx
npx plop