概念

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

典型的前端脚手架工具蕴含 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 命令即可疾速创立相干根底文件，防止了反复的、低效的复制、粘贴与批改文件工作。