我们在做新的页面或组件时,会做很多重复的初始化的工作。如创建类似的文件: 组件文件,样式文件等。文件中写类似的初始化代码: 引入样式,定义组件,导出组件等。
Plop 能帮你搞定这些重复工作。
Plop 介绍
Plop 是一个易学,易用,且功能强大的脚手架工具。它能通过终端命令,接收参数,创建你所需要的模板文件。
下面,我们以生成 React 的组件为例,介绍 Plop 的用法。
第 1 步 在项目中安装 Plop
npm install --save-dev plop
第 2 步 配置 Plop
我们来实现,输入组件名称,生成组件代码的功能。组件名称做为参数,通过命令行中获取。Plop 从命令行中获取参数,用的是 inquirer。
plopfile.js
是 Plop 的配置文件。在项目根目录下新建 plopfile.js
,内容如下:
function main (plop) {
plop.setGenerator('component', {
description: '创建组件',
// 命令行交互
prompts: [
{
type: 'input',
name: 'name',
message: '组件名称'
}
],
actions: data => {
const componentName = toComponentName(data.name)
const actions = [
{
// 添加组件文件
type: 'add',
// 生成的文件的地址
path: `src/components/{{name}}/index.tsx`,
// 模板文件地址
templateFile: `plop-templates/component.hbs`,
data: {// 传入模板的参数
componentName
},
skipIfExists: true
},
{
// 添加样式文件
type: 'add',
path: `src/components/{{name}}/style.scss`,
templateFile: 'plop-templates/style.hbs',
skipIfExists: true
}
]
return actions
}
});
}
function toComponentName(name) {
let nameArray = name.split('-')
return nameArray.map(item => `${item.charAt(0).toUpperCase()}${item.substr(1)}`).join('')
}
module.exports = main
第 3 步 创建模板文件
根据上一步配置中的模板文件路径,创建目录 plop-templates
,并在该目录下创建文件: component.hbs
和 style.hbs
。
component.hbs
是组件模板,内容如下:
import s from './style.scss'
interface I{{componentName}}Props {
className?: string;
}
function {{componentName}}({ className }: I{{componentName}}Props) {
return (
)
}
export default {{componentName}}
{{componentName}}
是从上一步中传入的参数。Plop 解析模板用的是 handlebars。
style.hbs
是样式模板。内容为空,也可以些样式的初始化代码。
第 4 步 增加生成命令
在 package.json
中新增:
"script":{
...,
"new":"plop"
}
第 5 步 运行
npm run new
至此,一个简单的固定模板就自动生成就写好了。
当然,Plop 的功能不止一次。Plop 支持根据参数来决定生成哪些文件。告别复制粘贴,用 Plop 来生成模板代码吧~
觉得本文对你有帮助。点个赞,分享给小伙伴们吧~
参考文档
- Plop 官网
- 告别复制粘贴:动态模板生成小技巧