前端脚手架工具-使用 Plop 快速构建项目文件

概念

前端脚手架工具用于快速创建项目的基础结构，提供了项目规范与约定。

典型的前端脚手架工具包含 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 命令即可快速创建相关基础文件，避免了重复的、低效的复制、粘贴与修改文件工作。