用 Plop 解放你的双手，尽情摸鱼吧！自定义脚手架可以提高开发过程中创建重复文件的效率。Yeoman 以及 Plop

Plop 这个词似乎已经变得陌生了，而面对 Vue-cli、Angular-cli、Create-react-app 这样的脚手架工具，人们却耳熟能详。

以 React 为例，create-react-app 创建好项目后，项目中新建任何一个组件，都会重复地创建项目文件目录，并且文件基础代码也相似。过程重复繁琐，浪费摸鱼时间。为了节省摸鱼时间，自定义脚手架可以提高开发过程中创建重复文件的效率。

Yeoman 以及 Plop 是常见脚手架开发工具，今天带大家学习如何用 Plop 自定义一个属于自己的脚手架。

Plop 文档地址：plopjs.com/

Plop 使用步骤

**Step1：**将 Plop 作为开发依赖安装至项目中（新建文件夹，初始化项目，你懂的）。

$ npm install --save-dev plop

**Step2 ：**根目录下新建 plopfile.js，该文件为 plop 的入口文件。

**Step3 ：**配置 plopfile.js 文件。

1）plopfile.js 文件导出一个函数。

2）该函数接受一个 plop 对象作为参数，该对象用于创建生成器对象, 该对象包含 plop的 api。

3）创建一个生成器 plop.setGenerator（generatorName，configObj）结构。

4）当前文件夹结构如下：

**Step4 ：**运行创建的 Plop 生成器。

1）全局安装 plop

$ npm install -g plop

2）运行 plop

$ plop

1）配置 package.json

// package.json
{
      "scripts": {
    "plop": "plop"
  }
}

2）运行生成器文件即可生成

 $ npm run plop

Step5 : 生成文件。

Before：运行 Plop 前

After：运行 Plop后自动生成文件成功！可以愉快地摸鱼了哇~