hygen 自动化创建模板文件神器

hygen是什么？作者的介绍是：一个简单，快速，可扩展的代码生成器。其用途是帮助开发者自动创建模板文件的工具，旨在提高开发效率，下面就来说说怎么在项目中使用hygen。

hygen官方文档

 

1、全局安装hygen

npm i -g hygen

2、安装成功后cd到项目目录，然后在项目中初始化hygen

hygen init self

初始化之后项目中会多一个_templates的文件夹，generator是构建器文件夹，再下一级的文件夹名是对应创建文件时的命令，ejs.t 文件则是模板文件，详细的后面会讲解。

 

3、构建第一个自己的构建器，我这里跟官方文档一样起名为mygen

hygen generator new mygen

执行完上面的命令后，_templates文件夹下面就会多了一个mygen的文件夹

 

4、使用构建器创建第一个文件

new就是mygen文件夹下面的new文件夹，执行这条命令就会创建new文件夹下面的所有模板

hygen mygen new

执行完上面的命令后，就会多出一个app的文件夹，里边的hello.js就是根据 mygen>new>hello.ejs.t 为模板生成的文件，这一点通过对比hello.js 和 hello.ejs.t 就能看出。

hello.ejs.t 文件里的to：代表生成的文件要插入的路径和文件（例如想要生成vue文件只需要把后缀改成.vue即可），至于模板内容只需要把文件里的内容替换成想要的模板内容即可。

 

5、自定义新创建的文件名

通过 <%= key %> 可以自定义文件名，以及赋值。首先把 hello.ejs.t 文件改成下面这样：

---
to: app/<%= folder %>/<%= name %>.js
---
const fileName = '<%= name %>'
const hello = '<%= message %>'

console.log(fileName)
console.log(hello)

然后在命令行内运行下面这段命令，其中 --name 对应的是 <%= name %> 中的name，folder、message同理。

hygen mygen new --folder testFolder --name testFile --message HelloTest

这样就得到了一个自定义命名的 testFolder文件夹，已经文件夹里的 testFile.js 其中 --folder testFolder --name testFile --message HelloTest 没有先后顺序

 

到这里，已经可以通过简单的命令 hygen mygen new 快速的生成模板文件，只要事先编写不同的模板文件，就可以在项目中快速的生成不同的目录和文件，例如vue、components、api、vuex...

 

 

交互式的构建器

为了更好的生成不同的文件 hygen 还提供了另一种生成文件的方式，使用交互式的构建器生成目录和文件

1、执行以下命令，创建交互式构建器：

hygen generator with-prompt mygen

通过默认的generator可以构建一个带交互提示的构建器，然后会得到一个名为with-prompt的文件夹，与new文件夹相比，多了一个prompt.js的文件，这个文件是用来处理交互提示以及一些操作逻辑的。

2、修改模板文件和prompt.js

首先把 hello.ejs.t 文件改成下面这样：

---
to: src/<%= folder %>/<%= name %>.js
---
const hello = <%= name %>

console.log(hello)

注：模板文件名可自己随意修改，如 page.ejs.t

prompt.js 改成下面这样：

module.exports = [
  {
    type: 'input',
    name: 'folder',
    message: '请输入文件夹名: ',
    validate (value) {
      if (!value.length) {
        return '文件夹名不能为空！'
      }
      return true
    }
  },
  {
    type: 'input',
    name: 'name',
    message: '请输入文件名: ',
    validate (value) {
      if (!value.length) {
        return '文件名不能为空！'
      }
      return true
    }
  }
]

3、这个时候跑下面这条命令，with-prompt 为文件夹名，这条命令的意义和上面的hygen mygen new是一样的。

hygen mygen with-prompt

执行命令后会得到写在prompt.js里的问题，这里输入你要创建的文件夹名称然后回车，文件名称同理。如果输入的文件夹已存在，则会把创建的文件插入该文件夹中，如果是文件已存在，则会提示你是否要覆盖。

现在已经在src目录下创建了一个testFolder了。

其中传入模板文件的参数除了输入的方式，还有选择的方式：

把prompt.js 改成下面这样：

module.exports = [
  {
    type: 'select',
    name: 'folder',
    message: '请选择文件夹',
    choices: [{ message: 'testFolder目录', value: 'testFolder' }, { message: 'views目录', value: 'views' }]
  },
  {
    type: 'input',
    name: 'name',
    message: '请输入文件名: ',
    validate (value) {
      if (!value.length) {
        return '文件名不能为空！'
      }
      return true
    }
  }
]

再次执行 hygen mygen with-prompt 便会得到下面这样，然后选择要插入的目录，就可以在对应的目录生成模板文件了。

 

结语：通过前期的配置，hygen能快速的帮助开发者创建各种项目目录和文件，提高开发的效率，至于hygen要怎么使用则需要根据实际项目去配置了。到这里hygen的简单使用已经介绍完了，根据官方文档还有其他的拓展性，这个可以自行去拓展，我也会在后面慢慢的补充一些我认为实用的东西。

 

 

以下为扩展性内容

工具库

hygen还内置了 inflection-js 、change-case 等工具以满足某些要求，例如下面的 h.changeCase.isUpper（判断大写）、h.inflection.dasherize（将下划线转为破折号）

---
to: src/<%= folder %>/<%= name %>.js
---
const folder = '<%= h.changeCase.isUpper(folder) %>'
const hello = '<%= h.inflection.dasherize(name) %>'

console.log(folder)
console.log(hello)

条件渲染

参数里还可以使用三元运算和 if 判断，if 的语法和工作原理 点这里 EJS 文档

---
to: "src/<%= folder %>/<%= name ? name : 'test' %>.js"
---
const folder = '<%= h.changeCase.isUpper(folder) %>'
const hello = '<%= h.inflection.dasherize(name) %>'
const message = 'message = ' + '<% if(message){ -%><%= message %><% } -%>'

console.log(folder)
console.log(hello)
console.log(message)