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

hwjfqr

概念

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

典型的前端脚手架工具包含 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)
image.png

以 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
image.png

编写配置文件

// 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 命令即可快速创建相关基础文件,避免了重复的、低效的复制、粘贴与修改文件工作。
image.png

阅读 1.9k
20 声望
3 粉丝
0 条评论
20 声望
3 粉丝
文章目录
宣传栏