【亲测免费】 Plop.js 教程：快速入门与配置详解

Plop.js 是一个微小的代码生成框架，旨在帮助开发者以一致且高效的方式创建代码模板或文本文件。本教程将引导您了解其基本概念、目录结构以及关键配置。

1. 项目目录结构及介绍

Plop.js 的核心是 plopfile.js 文件，这个文件定义了生成器（generators）和相关的操作。一个典型的项目结构如下：

my-project/
├── package.json
└── plopfile.js

• package.json: 包含项目信息，包括依赖管理和脚本。
• plopfile.js: Plop.js 的入口文件，用于定义生成器和相关设置。

2. 项目启动文件介绍

Plop.js 的启动是通过运行 plop 命令来执行的。在 package.json 中添加适当的脚本，可以轻松调用 plopfile.js：

对于Node.js v20.6及以上版本：

{
  "scripts": {
    "generate": "cross-env NODE_OPTIONS='--import tsx' plop --plopfile=plopfile.ts"
  }
}

对于Node.js v20.5.1及以下版本：

{
  "scripts": {
    "generate": "cross-env NODE_OPTIONS='--loader tsx' plop --plopfile=plopfile.ts"
  }
}

然后在终端中输入 npm run generate 或 yarn generate 来启动 Plop。

3. 项目的配置文件介绍

plopfile.js 详解

plopfile.js 是 Plop.js 的配置文件，主要由导出的一个函数组成，该函数接收一个 plop 对象并注册生成器。以下是一个基础示例：

export default function (plop) {
  // 创建名为 basics 的生成器
  plop.setGenerator('basics', {
    description: 'this is a skeleton plopfile',
    prompts: [], // 添加提示
    actions: [], // 定义操作，如复制文件或运行脚本
  });
}

设置生成器（setGenerator）

setGenerator 方法用于定义一个生成器。它接受两个参数：生成器名称和一个对象，该对象包含描述、提示数组和动作数组。

例如，你可以添加一个用于创建新组件的生成器：

// 在 plopfile.js 中
plop.setGenerator('create-component', {
  description: 'Create a React Component',
  prompts: [
    {
      type: 'input',
      name: 'componentName',
      message: 'What should the component be called?',
    },
  ],
  actions: [
    {
      type: 'add',
      path: 'src/components/{{kebabCase componentName}}/{{kebabCase componentName}}.tsx',
      templateFile: './templates/component.hbs',
    },
    {
      type: 'add',
      path: 'src/components/{{kebabCase componentName}}/__tests__/{{kebabCase componentName}}.test.tsx',
      templateFile: './templates/test.hbs',
    },
  ],
});

在这个例子中，prompts 部分包含一个输入提示，询问组件名；actions 部分定义了要执行的动作，如添加新的源文件和测试文件。

自定义动作（setActionType）

setActionType 允许你注册自定义的异步操作类型。这对于处理更复杂的任务，如数据库交互或文件系统操作很有帮助。

plop.setActionType('customAsyncAction', function (answers, config, plop) {
  return new Promise((resolve, reject) => {
    // 进行你的异步操作
    if (success) {
      resolve('成功状态消息');
    } else {
      reject('错误消息');
    }
  });
});

// 使用自定义动作
plop.setGenerator('testGen', {
  // ...
  actions: [
    { type: 'customAsyncAction', ...configProps },
  ],
});

注册自定义提示（setPrompt）

如果你需要使用 Inquirer.js 不提供的定制提示，可以使用 setPrompt 注册它们：

import AutocompletePrompt from 'inquirer-autocomplete-prompt';

plop.setPrompt('autocomplete', AutocompletePrompt);

以上就是对 Plop.js 目录结构、启动文件和配置文件的基本介绍。利用这些知识，你就能开始构建自己的代码生成工作流了。查阅更多官方文档或社区资源，可以进一步提升你的体验。