plop
yeoman大型的脚手架工具,plop小型的脚手架工具,用于创建项目中特定类型的文件小工具,有点类似yeoman中的subgenerator，不会独立使用，一般把plop集成在项目当中，用来动态的创建同类型的文件，从开发中面临的问题说起，开发中经常创建相同类型的文件。
基本使用
// 安装plop依赖包
$ npm i plop --save
// 初始化文件
$ npm init
// 项目的根目录下新建文件 plopfile.js
// plop入口文件 需导出一个函数
// 此函数接受一个plop对象，用于创建生成器任务
module.exports = (plop) => {
plop.setGenerator("component", { // 生成器的名字component
description: "create a component",
// 命令交互方式
prompts: [
{
type: "input",
name: "name",
message: "component name",
default: "MyComponent",
},
],
// 执行动作
actions: [
{
type: "add",
path: "src/components/{{name}}/{{name}}.js", // 目标文件
templateFile: "plop-templates/component.hbs", // 模板文件
},
{
type: "add",
path: "src/components/{{name}}/{{name}}.css", // 目标文件
templateFile: "plop-templates/component.css.hbs", // 模板文件
},
],
});
};
// 根目录下新建
$ mkdir plop-templates
$ cd plop-templates
$ echo {{name}} > component.hbs
$ echo {{name}} > component.css.hbs
运行plop
// component是对应生成器名字
$ yarn plop component
// input 命令行交互
? component name Footer
// 创建两个文件
✔ ++ /src/components/Footer/Footer.js
✔ ++ /src/components/Footer/Footer.css
Footer
Footer
