携手创作，一起生长！这是我参与「日新计划 8 月更文挑战」的第1天，点击检查活动详情

介绍一款好用的东西：Plop。运用 Plop，再凭借模板文件和命令行，就能够主动帮咱们创立组件模板，释放双手。

痛点

现代前端开发根本都运用了组件化的思想，例如咱们能够把一个页面拆分红不同的组件。一个组件是一个文件夹，里边包括组件代码，例如在 Vue 中需求.vue文件，在 React 中需求 .jsx/.js, .css文件。创立过程可能是这样的

【宝藏工具】一条命令自动创建前端组件模板

手动一个一个创立的确麻烦，特别需求创立许多文件的时分。“懒”作为程序员的一大优点，自然是看不下去了~ 恰好今日发现了 Plop 这个东西，有了它，创立组件成了一条命令就能够解决的事，而且能够主动在文件内生成咱们预先写好的代码。于是，创立组件就成了这样：

【宝藏工具】一条命令自动创建前端组件模板

运用方法

想深化了解的能够去 Plop官网 plopjs.com/

这儿咱们介绍一下主动创立模板的方法

装置

pnpm install plop --save-dev

创立装备文件

在项目根目录下创立 plopfile.js，plop 会读取里边的装备。

由于我是基于 Vite创立的脚手架，默许采用 ESM 模块化的方法。文件内容为

export default (plop) => {
  plop.setGenerator('comp', {
    description: 'generate a component',
    prompts: [
      {
        type: 'input',
        name: 'name',
        message: 'component name: '
      }
    ],
    actions: [
      {
        type: 'add',
        path: 'src/components/{{name}}/index.js',
        templateFile: 'plop-templates/component.hbs'
      },
      {
        type: 'add',
        path: 'src/components/{{name}}/index.module.css',
        templateFile: 'plop-templates/component.css.hbs'
      }
    ]
  })
}
  • setGenerator 的第一个参数为生成器称号，例如这儿称号为 comp，待会儿咱们就用 plop comp进行调用
  • description是对该生成器的描述
  • prompts是命令行提示，是一个数组，能够有多条提示，多种类型。这儿是一个接收输入的类型，type 表明类型，name 表明将输入赋给谁，message 是提示信息
  • actions 是具体行为。这儿是两个增加文件的动作，type 表明类型，path 表明增加文件的途径和文件名，temokateFile 表明运用的模板文件

创立模板

好处体现在它的灵敏，咱们能够在模板中运用变量！

为了规范并且和上述装备相对应，咱们在根目录下创立一个文件夹 plop-template，寄存模板文件。

创立 component.hbs

import style from './index.module.css'
const {{name}} = () => {
  return (
    <div>{{name}}</div>
  )
}
export default {{name}}

有没有发现这儿边竟然能够运用变量，没错这儿的 name 便是咱们在控制台输入的变量，并运用 mustache 语法引用变量。同理咱们还能够创立其他模板

执行命令

在终端输入 npx plop comp即可，这儿的 comp 便是咱们在前面定义的生成器称号

【宝藏工具】一条命令自动创建前端组件模板

OK，大功告成！

增加脚本

咱们也能够直接在 package.json中增加脚本，

"scripts": {
   ...
   "comp": "plop comp"
 }

现在在命令行输入 pnpm comp 也能够创立组件模板了！

【宝藏工具】一条命令自动创建前端组件模板

总结

运用方法能够总结为：

  • 装置 plop 依赖
  • 在根目录创立 plopfile.js 文件
  • 在 plopfile.js 中编写脚手架使命
  • 编写模板文件
  • 经过CLi运转脚手架使命

PS: 各位如果有其他更好的方法，能够推荐给小弟！！！