概念

前端脚手架工具用于疾速创立我的项目的根底构造，提供了我的项目标准与约定。

典型的前端脚手架工具蕴含 Yeoman、Plop 等。Vue Cli 与 Create React App 亦蕴含了脚手架性能。
Yeoman 是一个通用型的脚手架工具，个别用于一次创立整个我的项目。

Plop 是一个小型脚手架工具，用于疾速创立我的项目中的特定文件。

每次有新需要，须要增加新的一套页面时，都须要做一些反复的、繁琐的复制、粘贴及批改等工作。而通过 Plop 疾速创立特定模板文件能够很好的解决以上问题，为开发提效。

Plop 应用案例

装置 Plop

npm i -D plop

创立并编写模板文件

在我的项目根目录创立 plop-templates 目录用于保留模板文件。

• 模板文件的后缀为 .hbs，遵循 Handlerbars 模板引擎语法。

此处以 React 我的项目为例，创立每个页面的组件文件（index）、款式文件（styles）、数据交互与接口文件（reducer、api）

以 index.hbs 文件为例，内容如下：

import React,{useEffect,useReducer} from 'react'
import {} from 'antd';
import reducer from './reducer';
import styles from './index.less'

function {{properCase name}}() {
  const initState={listFilter:{},
    loading:{}}

  const [{},commit]=useReducer(reducer,initState)

  useEffect(()=>{},[])

  return (<div className={styles['{{ name}}']}>
      {{properCase name}}
    </div>
  )
}

export default {{properCase name}}

• 其中的 properCase 示意将 name 转换为大驼峰（合乎组件名命名标准）。
• 此处的 name 是后续由 Plop 从用户输出中读取而失去的。

创立并编写 Plop 配置文件

在我的项目根目录创立 Plop 配置文件 —— plopfile.js

编写配置文件

// plop 配置文件必须导出一个函数，这个函数接管一个 plop 对象，这个对象用于创立相干工作。module.exports = plop => {
// 此处的 new 示意工作名称，后续可通过【plop 工作名】来调用相干工作。plop.setGenerator('new', {
    description: 'create a page', // 形容
    // 命令式交互配置
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'page name',
        default: 'default-page',
      },
    ],
    // 实现命令行交互后须要执行的一系列动作
    actions: [
      {
        type: 'add', // 示意增加新文件
        path: 'src/pages/{{name}}/index.jsx', // 指定文件的输入门路
        templateFile: './plop-templates/index.hbs', // 指定模板文件
      },
      {
        type: 'add',
        path: 'src/pages/{{name}}/index.less',
        templateFile: './plop-templates/styles.hbs',
      },
      {
        type: 'add',
        path: 'src/pages/{{name}}/api.js',
        templateFile: './plop-templates/api.hbs',
      },
      {
        type: 'add',
        path: 'src/pages/{{name}}/reducer.js',
        templateFile: './plop-templates/reducer.hbs',
      },
    ],
  });
};

• 以上是依据模板文件创建新文件的用法（最罕用），更多用法请参阅 Plop 官网文档。

在 package.json 的脚本中设置相干创立命令，不便后续调用。

当执行 npm run new 时，通过应用 plop 调用 new 工作。

{
  "scripts": {
      ...
    "new": "plop new",
    ...
  }
}

应用

调用 npm run new 即可运行之前在 plop 配置文件中定义的 new 工作，它会依据用户输出，联合用户定义的模板创立对应的文件。
每当有新需要时，例如目前有一个数据视图治理的新页面需要，只需运行 npm run new 命令即可疾速创立相干根底文件，防止了反复的、低效的复制、粘贴与批改文件工作。