29 - Hygen - 程序码产生器

在开发时，我们总是需要为系统加入新的功能，这意味着专案中的档案会逐渐增多，虽然依照要扩充的功能不同，要加入的档案类型也会有些许的不同，但是对於档案的命名以及档案内部的大框架要尽量地保持一致，有了一致性，才能确保程序码的品质。

依照习惯的不同，开发者会使用不一样的方式去新增相同功能的档案，使得同个专案中有多个写法，造成维护的困难。

以程序码产生器取代手动建立程序码，不仅可以保证程序码的一致性，也可以减少因手动建立所耗费的时间与错误的发生率。

减少手写的程序码量 - Hygen

Hygen 是个 npm 套件，它是个程序码产生器，可以依照模板产生对应的程序码档案。

在使用 Hygen 作为产生器前，我们要编辑程序码生成时参考的模板档案，完成模板的编辑後，使用 Hygen 的 CLI 叫用对应的模板，并带入模板所需的参数，藉此就可以完成程序码的产生。

安装 Hygen

Hygen 为 npm 套件，需要先使用 npm 安装：

npm install hygen --save-dev

使用 Hygen

在使用前先建立模板，在 _template/generator/new 中加入模板档案 hello.ejs.t ：

---
to: app/hello.js
---
const hello = `
Hello!
This is your first hygen template.

Learn what it can do here:

https://github.com/jondot/hygen
`

console.log(hello)

执行 hygen 指令建立程序码：

> npx hygen generator new

Loaded templates: _templates
       added: app/hello.js

执行完成後，可以看到 app 目录中多了一个以模板 hello.ejs.t 产出的档案 hello.js 。

上述就是使用 Hygen 最简单的范例，接着我们会依序介绍指令使用方式、模板编辑方式与配置产生器。

指令使用方式

Hygen 的指令围绕在两个概念， GENERATOR 与 ACTION ，以前面的例子来说：

npx hygen generator new
          ^         ^--- ACTION
          |------------- GENERATOR

• GENERATOR 对应 _template 目录下的第一层（例子中的 generator 目录）
• ACTION 对应 _template 目录下的第二层（例子中的 new 目录）

在执行指令後， Hygen 会将 GENERATOR 与 ACTION 对应的模板带入参数执行建置程序码。

指令参数

hygen 指令有个 --dry 参数：

> npx hygen generator new --dry
(dry mode)
Loaded templates: _templates
       added: app/hello.js

它会开启 dry mode ，在此模式下， Hygen 依然会执行并产生程序码，但是不会储存，用在测试的时候使用。

除了 --dry 外，其他的参数会作为变数传入模板内。

举个例子，我们将 hello.ejs.t 修改成下面这样：

---
to: app/<%= name %>.js
---
const hello = `
Hello <%= name %>!
This is your <%= nth %> hygen template.

Learn what it can do here:

https://github.com/jondot/hygen
`

console.log(hello)

这模板引用了变数 name 与 nth ，现在我们在执行指令时带入参数：

> npx hygen generator new world --nth second

Loaded templates: _templates
       added: app/world.js

• world ：与 --name world 有同样的效果，由於参数 name 十分常用，因此 Hygen 让我们可以少输入 --name 。
• --nth second ：设定参数 nth 为 second 。

可以看到档名依照参数的设定变为 world.js ，另外档案也会依照参数来生成内容：

const hello = `
Hello world!
This is your second hygen template.

Learn what it can do here:

https://github.com/jondot/hygen
`;

console.log(hello);

模板编辑方式

Hygen 的模板分为 frontmatter 与 body 两部分：

---                                     <--- frontmatter
to: app/<%= name %>.js
---
const hello = `                         <--- body
Hello <%= name %>!
This is your <%= nth %> hygen template.

Learn what it can do here:

https://github.com/jondot/hygen
`

console.log(hello)

Frontmatter

frontmatter 区块上下的 --- 与 ejs 区块做区隔，使用者可以使用各属性设置模板的 metadata 。

Hygen 提供许多 frontmatter 属性，上例的 to 就是其中一个 forntmatter 的属性，它表示程序码档案要放置的目标位置与档名。

frontmatter 区块也可以使用参数来配置各种属性：

---
to: app/<%= name %>.js
---

上例就使用参数 name 来设定档名，这样的方式可以增加产生器的弹性，使其更符合需求。

Body

Body 区块设定程序码的产生内容，它与前面的 frontmatter 区块可以使用 EJS 模板语法来设置，像是 <%= name %> 就属於 EJS 的语法。

在经由 EJS 处理後， Body 区块会变为实际的程序码内容，并被存於目标档案中。

配置产生器

产生程序码的方式，除了前面说到的直接输入参数外， Hygen 另外提供交互问答的方式让我们建立程序码。

使用交互问答设定程序码内容

要设定交互问答，可以在 ACTION 目录中建立 prompt.js ：

module.exports = [
  {
    type: 'input',
    name: 'name',
    message: 'Name:',
    validate(value) {
      if (!value.length) {
        return 'New must have a name.';
      }
      return true;
    },
  },
];

这个由 COMMON.JS 模组导出的阵列，设定各步骤的问答方式， Hygen 使用 Enquirer 来提供问答的配置，属性 name 表示此问答结果传入的参数名称，我们可以用这名称的变数在模板内使用这个回答的值。

以下面的模板来说：

---
to: <%= name %>/README.md
---
# <%= name %>

指令的执行过程如下：

✔ Name: · hello

对於 name 的问答输入 hello ，模板内的 name 就会是 hello 。

如果有传入参数，就算是有设定问答也会被忽略，以上面的例子来说，如果执行指令 npx hygen generator new --name hello ，那此问答就会被忽略。

本文重点整理

• 程序码产生器既可以统一程序码的架构与档案名称，也可以节省手动建档的花费，让开发更为轻松。

参考资料

• Hygen
• GitHub: jondot/hygen
• EJS