告别复制粘贴：动态模板生成小技巧

这是第 75 篇不掺水的原创，想获取更多原创好文，请搜索公众号关注我们吧~ 本文首发于政采云前端博客：告别复制粘贴：动态模板生成小技巧

前言

在日常开发中，我们需要不停的新建页面和组件。以 Vue 项目为例，我们在新建一个页面的时候，需要经历一遍又一遍重复的过程：

1、先新建一个文件夹

2、然后新建一个.vue文件，写上<template>、<script>、<style>

3、如果页面涉及多个组件，还要新建 component 文件夹，并重复以上两个步骤

4、最后才是我们的业务代码

假设新建一个页面，并复制粘贴模板代码需要 1 分钟的时间，一个项目如果有 60 个页面，就得花费 1 个小时写这种重复性高、无聊且枯燥的代码。这显然不是我们想看到的，下面给大家分享几个提效小技巧。

基于 Vscode 的 Snippets 自定义代码块

通过 Vscode 的 Snippets 我们可以自定义 Snippets ，从而实现快捷生成代码片段。

打开 Vscode ，依次点击文件——首选项——用户代码片段

Snippets 语法

prefix: 代码片段名字，即输入此名字就可以调用代码片段
body: 这个是代码段的主体.需要编写的代码放在这里　　　 
$1: 生成代码后光标的初始位置
$2: 生成代码后光标的第二个位置,按 tab 键可进行快速切换,还可以有 $3,$4,$5.....
${1,字符}: 生成代码后光标的初始位置（其中 1 表示光标开始的序号，字符表示生成代码后光标会直接选中字符）
description: 代码段描述,输入名字后编辑器显示的提示信息
tab键制表符:\t
换行: \r 或者\n

以 vue.json 为例：

{
	"Print to console": {
		"prefix":"vue",
		"body": [
			"<template>",
			"\t<div>test</div>",
			"</template>",
			"<script>",
			"export default{",
				"\tmounted(){$1},",
				"\tcomponents: {},",
				"\tdata() {",
				"\t\treturn {",
				"\t\t};",
				"\t},",
		  "}",
			"</script>",
			"<style lang='less'>",
			"</style>"
		],
		"description": "vue-template"
	}
}

效果展示如下：

基于 plop 自定义基础的文件模板

plop的介绍可以看 plop官网，plop 功能主要是基于 inquirer 和 handlebars 。

简单的说，plop 这个轻量的脚手架就是通过提前配置好要生成的页面模板，并且在命令行中接受指定的参数，从而生成我们需要的模板。

在项目中安装 plop

npm install --save-dev plop

项目根目录下新建plopfile.js

module.exports = function(plop){
  plop.setGenerator('test',{ // 这里的 test 是一个自己设定的名字，在执行命令行的时候会用到
      description: 'generate a test', // 这里是对这个plop的功能描述
      prompts: [
        {
          type: 'input', // 问题的类型
          name: 'name', // 问题对应得到答案的变量名，可以在actions中使用该变量
          message: 'view name please', // 在命令行中的问题
          default: 'test' // 问题的默认答案
        }
      ],
      actions: data => {
          const name = '{{name}}';
          const actions = [
          {
              type: 'add', // 操作类型，这里是添加文件
              path: `src/views/${name}/index.vue`, // 模板生成的路径
              templateFile: 'plop-templates/view/index.hbs', // 模板的路径
              data: {
                name: name
              }
          }
        ];
        return actions;
      }
    });
}

在根目录下创建 plop-templates 文件夹，并在 plop-templates/view 里新建一个index.hbs

<template>
  <div />
</template>

<script>
  export default {
    name: '{{ properCase name }}',
    props: {},
    data() {
      return {}
    },
    created() { },
    mounted() { },
    methods: {}
  }
</script>

<style lang="less">

</style>

新增脚本

在package.json中新增

"script":{
    ...,
    "new":"plop"
}

运行npm run new

至此，一个简单的固定模板就自动生成好了。

plop 进阶

此时我们已经可以生成固定的模板了，那么问题来了，有些文件夹下面需要 .less 文件，有些则不需要，此时我们又该如何动态配置呢？

话不多说，直接看例子吧！

// plopfile.js 文件
module.exports = function(plop){
  plop.setGenerator('test',{
      description: 'generate a test',
      prompts: [
        {
          type: 'input',
          name: 'name',
          message: '请输入文件夹名称',
        },
        {
          type: 'input',
          name: 'less',
          message: '需要less文件吗？(y/n)',
        }
      ],
      actions: data => {
        const name = '{{name}}';
        let actions = [];
        if (data.name) {
          actions.push({
            type: 'add',
            path: `src/${name}/index.vue`, // 文件生成后所在的位置
            templateFile: 'plop-templates/view/index.hbs', // 模板路径
            data: {
              name: name
            }
          });
        }
        if (data.less === 'y') {
          actions.push({
            type: 'add',
            path: `src/${name}/index.less`, // 文件生成后所在的位置
            templateFile: 'plop-templates/index.less', // 模板路径
          })
        }
        return actions;
      }
    });
  }

此时我们已经可以动态配置文件的个数，那么问题又来了，在一个页面中有时需要导航条，有时不需要导航条，这种情况该如何解决呢？

// plopfile.js 文件
module.exports = function(plop){
  plop.setGenerator('test',{
      description: 'generate a test',
      prompts: [
        {
          type: 'input',
          name: 'pageName',
          message: '请输入文件夹名称',
        },
        {
          type: 'input',
          name: 'less',
          message: '需要less文件吗？(y/n)',
        },{
          type: 'confirm',
          name: 'hasNavbar',
          message: '需要页面导航栏吗？(y/n)',
          default: this.hasNavbar
        }
      ],
      actions: data => {
        const { pageName, less, hasNavbar } = data;
        const name = '{{pageName}}';
        let actions = [];
        if (pageName) {
          actions.push({
            type: 'add',
            path: `src/${name}/index.vue`,
            templateFile: 'plop-templates/view/index.hbs',
            data: {
              name: name,
              hasNavbar: hasNavbar, // 是否有操作按钮
            }
          });
        }
        if (less === 'y') {
          actions.push({
            type: 'add',
            path: `src/${name}/index.less`,
            templateFile: 'plop-templates/index.less',
          })
        }
        return actions;
      }
    });
  }

// hbs 文件
<template>
  <div>
    {{#if hasNavbar}}
      <div>导航栏</div>
    {{/if}}
  </div>
</template>

<script>
  export default {
    name: '{{ properCase name }}',
    props: {},
    data() {
      return {}
    },
    created() { },
    mounted() { },
    methods: {}
  }
</script>

<style lang="less">

</style>

效果展示如下：

总结

本文主要给大家介绍了几种简单的新建文件模板的小技巧，每天一个提效小技巧，准点下班不是梦！若有其他更好的方法，欢迎大家在留言区评论。

参考文献

告别手敲template,自动生成基础模板(Vue)

VScode—自定义代码片段snippets

基于PLOP使用命令行自动生成 .vue 文件

招贤纳士

政采云前端团队（ZooTeam），一个年轻富有激情和创造力的前端团队，隶属于政采云产品研发部，Base 在风景如画的杭州。团队现有 40 余个前端小伙伴，平均年龄 27 岁，近 3 成是全栈工程师，妥妥的青年风暴团。成员构成既有来自于阿里、网易的“老”兵，也有浙大、中科大、杭电等校的应届新人。团队在日常的业务对接之外，还在物料体系、工程平台、搭建平台、性能体验、云端应用、数据分析及可视化等方向进行技术探索和实战，推动并落地了一系列的内部技术产品，持续探索前端技术体系的新边界。

如果你想改变一直被事折腾，希望开始能折腾事；如果你想改变一直被告诫需要多些想法，却无从破局；如果你想改变你有能力去做成那个结果，却不需要你；如果你想改变你想做成的事需要一个团队去支撑，但没你带人的位置；如果你想改变既定的节奏，将会是“5 年工作时间 3 年工作经验”；如果你想改变本来悟性不错，但总是有那一层窗户纸的模糊… 如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程，亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的前端团队的成长历程，我觉得我们该聊聊。任何时间，等着你写点什么，发给 ZooTeam@cai-inc.com