前端黑科技篇章之plop，让你也拥有自己的脚手架

谁借莪１个温暖的怀抱￠ 2023-01-17 10:47 171阅读 0赞

点击上方 前端瓶子君，关注公众号

回复算法，加入前端编程面试算法每日一题群

![226dbe8dad9ce8445aabd360a17014ad.png][]

# 来源：大码猴    #

https://juejin.cn/post/6953981951569051685

**plop 是一款代码模板生成工具，配置好后只需在终端上敲上命令，就可以根据你自己定义好的模板文件去生成对应的文件，接下来我们看下面实现。**

### 项目安装plop ###

在项目中安装依赖

npm i plop -D
    复制代码

在package.json配置启动命令

![43777aee51adf323efc8780f0bed3a1f.png][] image.png

### plop配置文件（存放在项目根目录） ###

![8755261609abec601d65d23c6426ed83.png][] image.png

**demoFile.js的注释已经写的很清楚啦**

const FILE_PATH = 'demo'
    
    module.exports = {
      description: '创建文件，注意必须符合项目约束规范', // 命令启动描述
      prompts: [
        {
          type: 'input', // 命令方式，input-输入，list-选择，confirm-是否
          name: 'fileName', // 输入的文件名
          message: '请输入文件名称' // 提示信息
        }
      ],
      actions: data => {
        const { fileName } = data // 拿到终端输入的文件名
        const actions = []
        if (fileName) {
          actions.push({ // 添加新的模板文件 add
            type: 'add',
            path: `${FILE_PATH}/{
        { fileName }}.js`, // 生成的文件存放路径
            templateFile: '.setting/template/demoFile.hbs', // 模板文件路径
            data: { // 传递的数据给模板文件
              name: fileName,
            }
          })
    
          actions.push( // 再已有的文件中append 模板内容
            {
              type: 'append',
              path: `${FILE_PATH}/index.js`,
              pattern: /[\\s\\S]*?/, // 插入内容的匹配规则
              templateFile: '.setting/template/require.hbs', // 模板文件路径
              data: { // 需要告诉模板的参数值
                name: fileName
              }
            }
          )
        }
        return actions
      }
    }
    
    复制代码

### 模板文件的定义 ###

根据配置的文件创建两个模板文件

![1c0943a524a756bcee6937ba85c4fdf0.png][] image.png

生成模板的文件，直接拿传过来的变量名即可获取值

![7fe5fdaa1397631e3a4ba08196c5c4ec.png][] image.png

插入的模板文件

![f4c12f230fd54b29389434b82dabdbbc.png][] image.png

### 运行效果 ###

**现在就让我们试试它的神奇之处**

生成文件前的目录

![ace963f2c99f3428571d676725d16a12.png][] image.png

生成文件前的index文件

![8a07c9c68b4a8081cc249806521a1c91.png][] image.png

打开项目根目录的终端，输入npm run new，出现如下结果

![d85a04e933acfa8c98b944422eb6b7a8.png][] image.png

接下来我们输入text，回车，得到如下结果

![d8e0e6242c994863de4b0714d1841c74.png][] image.png

**第一个为生成的文件，第二个为插入内容之后的文件，现在来让我们看看操作之后的目录**

生成文件的内容，和我们模板定义的一毛一样

![389fe331079795371d57373b47556ce6.png][] image.png

插入在index.js内容上边

![e70c81288f81884893c6d18d95d5d0f3.png][] image.png

**是不是很实用，配置完之后我们就不用创建文件=>引用=>写路由那么多步骤啦，直接一个命令搞定，接下来带大家看实战配置哦。**

### 实战例子 ###

我把plop拆为三个生成模块，如下图：

![a4c6df94ef8d3ebe872359b57fbfad22.png][] image.png

配置如下：

![71a3c3f1eb09765bc59d120825a4452a.png][] image.png

**API配置**

![e74a36acfe3cdc64be1aedda2780b93e.png][] image.png

**component配置**

![2e3aa2e4c9e17f2663a93e58b886c569.png][] image.png ![8518a1a567d09533bcf220bbc6ba077c.png][] image.png

**page配置**

![1cb4479a43bc959ecb9151f700115af1.png][] image.png ![40468fb117fcfbec68eb703a452d937c.png][] image.png

**来看看我们的模板（可以看头上的文件名）**

![843ab0b98d0a8e643a36b53b4bc8c6a5.png][] image.png ![d525b264fb91aafa6ec4fa879a8356e0.png][] image.png ![4bfa54219b1276c3d4d4a18f19ed40aa.png][] image.png ![cc81ba20804193f1f0f0bd2916abfca3.png][] image.png ![f41f52eb513ff58f11e1f5591a30c8b5.png][] image.png

**敲 npm run new，接下来见证奇迹的时候**

![8e3a8ce90c5b2309d84372e727161e5f.png][] image.png

先选择page，看下效果：

![d31ca52462ab948beaf454baa843634e.png][] 选择手动

![745a89f012a4dd144cc44b954d1de297.png][] 选择Y，生成并写入如下文件

![0b5acd9511534d1e7943401dd8cb7203.png][] 效果：

![23eef79046309483d850340951ece0fb.png][] image.png ![a3b08b9f710944b4d53df07b7bc176ae.png][] image.png ![fa76069821a396a863879de51471df81.png][] image.png

**其他两个都是差不多的就不展示啦，是不是很神奇，配置好的话，能让我们的开发不再繁琐。如果你觉得这篇文章对你有帮助的话，请你移动下手指帮我点个赞哦！**

### 番外 ###

下面是本篇章前端黑科技工具篇哦，大大提高了前端开发效率呢。

1.**前端黑科技篇章之scp2，让你一键打包部署服务器**

## 最后 ##

欢迎关注【前端瓶子君】✿✿ヽ(°▽°)ノ✿

回复「算法」，加入前端编程源码算法群，每日一道面试题（工作日），第二天瓶子君都会很认真的解答哟！

回复「交流」，吹吹水、聊聊技术、吐吐槽！

回复「阅读」，每日刷刷高质量好文！

如果这篇文章对你有帮助，「在看」是最大的支持

》》面试官也在看的算法资料《《

“在看和转发”就是最大的支持

[226dbe8dad9ce8445aabd360a17014ad.png]: /images/20221021/95a45df3af4b4d6791435ce5662103ed.png
[43777aee51adf323efc8780f0bed3a1f.png]: /images/20221021/59fe85f983554026879396dfc0b353f1.png
[8755261609abec601d65d23c6426ed83.png]: /images/20221021/45fd0fa4aa59411fbd09cc34db5b4548.png
[1c0943a524a756bcee6937ba85c4fdf0.png]: /images/20221021/a00425b233ae4f88a9d9321838f84bef.png
[7fe5fdaa1397631e3a4ba08196c5c4ec.png]: /images/20221021/d4d4e55375f84dcd87e4b95382bda4ee.png
[f4c12f230fd54b29389434b82dabdbbc.png]: /images/20221021/51cdc814526043d1ab4aa6ef46995e1e.png
[ace963f2c99f3428571d676725d16a12.png]: /images/20221021/ceaeeb7db82043a68e26cad3063dc486.png
[8a07c9c68b4a8081cc249806521a1c91.png]: /images/20221021/c1573c54308b4e92a1c7f8de6fc92968.png
[d85a04e933acfa8c98b944422eb6b7a8.png]: /images/20221021/371f191a39434703a832315bf57fce8f.png
[d8e0e6242c994863de4b0714d1841c74.png]: /images/20221021/b4052b6e112d4a49ac176805d6349845.png
[389fe331079795371d57373b47556ce6.png]: /images/20221021/0bd0e28769a54c65a144a8ed4606225a.png
[e70c81288f81884893c6d18d95d5d0f3.png]: /images/20221021/01ec1b4792e949ae91417bebf83d18c3.png
[a4c6df94ef8d3ebe872359b57fbfad22.png]: /images/20221021/961297aedff94a18ba291aa8c77ced17.png
[71a3c3f1eb09765bc59d120825a4452a.png]: /images/20221021/58223c83cb9b47e8beef4dcbe3b2a824.png
[e74a36acfe3cdc64be1aedda2780b93e.png]: /images/20221021/782a4f30dc2c48c5874ab7afe3bf0439.png
[2e3aa2e4c9e17f2663a93e58b886c569.png]: https://img-blog.csdnimg.cn/img_convert/2e3aa2e4c9e17f2663a93e58b886c569.png
[8518a1a567d09533bcf220bbc6ba077c.png]: /images/20221021/2dbff433e585481cb974b52f4c821ed1.png
[1cb4479a43bc959ecb9151f700115af1.png]: https://img-blog.csdnimg.cn/img_convert/1cb4479a43bc959ecb9151f700115af1.png
[40468fb117fcfbec68eb703a452d937c.png]: /images/20221021/7b6fed08804243cdb43e0a641c945f21.png
[843ab0b98d0a8e643a36b53b4bc8c6a5.png]: https://img-blog.csdnimg.cn/img_convert/843ab0b98d0a8e643a36b53b4bc8c6a5.png
[d525b264fb91aafa6ec4fa879a8356e0.png]: https://img-blog.csdnimg.cn/img_convert/d525b264fb91aafa6ec4fa879a8356e0.png
[4bfa54219b1276c3d4d4a18f19ed40aa.png]: https://img-blog.csdnimg.cn/img_convert/4bfa54219b1276c3d4d4a18f19ed40aa.png
[cc81ba20804193f1f0f0bd2916abfca3.png]: https://img-blog.csdnimg.cn/img_convert/cc81ba20804193f1f0f0bd2916abfca3.png
[f41f52eb513ff58f11e1f5591a30c8b5.png]: /images/20221021/40dad60c3cf64c5bbe1639bd04af0cfb.png
[8e3a8ce90c5b2309d84372e727161e5f.png]: /images/20221021/12af3a8cac7d4bfdb6ceaaee62f55c53.png
[d31ca52462ab948beaf454baa843634e.png]: /images/20221021/45adff4858d6493f8d80a7d9ae3cabcc.png
[745a89f012a4dd144cc44b954d1de297.png]: /images/20221021/e47b48271cac455db85f1599d03e71cb.png
[0b5acd9511534d1e7943401dd8cb7203.png]: /images/20221021/7dd354e4c7c04cdfa142b7a3b1e70461.png
[23eef79046309483d850340951ece0fb.png]: https://img-blog.csdnimg.cn/img_convert/23eef79046309483d850340951ece0fb.png
[a3b08b9f710944b4d53df07b7bc176ae.png]: https://img-blog.csdnimg.cn/img_convert/a3b08b9f710944b4d53df07b7bc176ae.png
[fa76069821a396a863879de51471df81.png]: /images/20221021/9c574e99a683446ca4f46fb13523f399.png