Plop 简介
是一个前端脚手架工具,最大的好处是通过输入命令创建相同模板的css,js,提高重复操作的效率
Plop 的基本使用
基于一个react 项目
- yarn add plop --dev 将 plop 安装在项目中
yarn add plop --dev
- 在项目根目录新建一个 plopfile.js 文件
// Plop 入口文件,需要导出一个函数 // 此函数接收一个 plop 对象,用于创建生成器任务 module.exports = plop => { 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' }, { type: 'add', // 代表添加文件 path: 'src/components/{{name}}/{{name}}.test.js', templateFile: 'plop-templates/component.test.hbs' } ] }) }
- 新建 plop-templates 文件夹,在文件夹新建 component.hbs , component.css.hbs,component.test.js.hbs
- component.hbs:
-
//component.hbs import React from 'react'; export default () => ( <div className="{{name}}"> <h1>{{name}} Component</h1> </div> )
文件内容举例:
component.css.hbs//component.css.hbs .{{name}} { }
component.test.hbs
//component.test.js.hbs import React from 'react'; import ReactDOM from 'react-dom'; import {{name}} from './{{name}}'; it('renders without crashing', () => { const div = document.createElement('div'); ReactDOM.render(<{{name}} />, div); ReactDOM.unmountComponentAtNode(div); });
- yarn plop component 创建了一个footer模板