脚手架 - 用Plop工具生成项目中的组件

 

项目网址:https://gitee.com/big-right-right/plop-mysample

一. Plop简介

Plop是一个小工具,它提供了一种简单的方法用一致的方式生成代码或任何其他类型的文件。

比如在项目中,每个组件的初始化文件内容基本一致,则可用plop来生成组件,避免每次手动生成的繁琐。

链接:https://plopjs.com/

 

二. 用Plop生成项目中的组件

1. 安装 plop 模块为开发依赖:

yarn add plop --dev

2. 项目根目录下创建组件的模板文件 plop-templates/component.hbs:

export default () => {
    <div class="{{name}}">
        <h1>{{name}} Component</h1>
    </div>
}

3. 再创建一个模板文件 plop-templates/component.css.hbs:

.{{name}}{
    color: red;
}

4. 项目根目录下创建 plopfile.js 文件来定义脚手架任务:

// plop 入口文件,需导出一个函数
// 此函数接收一个plop对象,用于创建生成器任务

module.exports = plop => {
    // 定义一个叫 component 的任务来自动生成组件的基本文件
    plop.setGenerator('component', {
        description: 'create a component',
        prompts: [
            {
                type: 'input',
                name: 'name',
                message: 'component name',
                default: 'MyComponent'
            }
        ],
        actions: [
            {
                type: 'add', // 添加文件
                path: 'src/components/{{name}}/name.js',
                templateFile: 'plop-templates/component.hbs'
            },
            {
                type: 'add',
                path: 'src/components/{{name}}/name.css',
                templateFile: 'plop-templates/component.css.hbs'
            }
        ]
    })
}

5. 通过plop提供的 plop 命令来运行脚手架工具以生成组件

创建一个新组件,执行:

yarn plop component

执行完成后,则可以在项目 src/components 目录下看到生成的组件文件。

 

本文 完。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值