前端自动化构建工具 ---- Plop
前言:周末在家学习了一些前端自动化构建工具,Generator、Plop、Grunt、Gulp,我还以为目前用不到这些工具,没想到周一一上班看到这周任务是要开发N个新模块,我就感觉我该求助于某个自动化工具了😂😂
我要开发的每个模块的结构骨架都非常相似,就可以使用Plop来实现自动化了,Plop旨在根据模板文件自动化创建组件,而不是一个完整的大型应用,这是非常符合我的预期的😄😄😄,接下来我就来介绍一下Plop如果帮助我们在开发过程中提高工作效率。
一、安装plop
在项目的根目录下面使用yarn命令安装plop:yarn add plop
可以在Plop代码仓库看到Plop源代码以及详细说明文档:https://github.com/plopjs/plop
二、编写plop的入口文件:plopfile.js
在项目根目录下创建一个文件:plopfile.js。在后面的命令行交互中,我们可以通过prompts获取用户输入的一些信息,如下面的name变量就会由用户输入获得,默认值是MyComponent。我们在指定模板文件生成新文件的时候,可以通过花括号形式的插值表达式传入用户输入的值,如{ {name}}.js,那生成的文件名就是用户输入的字符串名字。
plopfile.js:
// Plop 入口文件,需要导入一个函数
// 此函数接受一个plop对象,用户创建生成器任务
module.exports = plop => {
plop.setGenerator('component', {
// component 就是接下来的yarn plop命令后面带来指令名称
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