使用 Hygen 进行文件脚手架

我阅读了 一篇最近的 Smashing Magazine 文章，其中包含对 Hygen 的推荐。我碰巧正在一个 Next.js 应用程序中做大量的新的 UI 工作，而我所做的手动文件夹/文件脚手架数量正变得越来越烦人。所以时间非常完美。

在这个我正在使用的应用程序中，我们团队一致同意一个新的组件具有这样的结构

/NewComponent
  index.js
  NewComponent.js
  NewComponent.module.scss

长期以来，我都是使用 VS Code 中的 UI 选项手动创建文件夹和文件。

但这很慢、很无聊，而且容易出错（我无法告诉你我多少次意外地创建了文件而不是文件夹）。

Hygen 的作用是为我提供了一个 CLI 来完成所有这些工作。我真正喜欢的是它是基于代码库中的文件，因此每个人都可以共享它们，并帮助更新和维护它们。

因此，为了开始使用，我们将按照推荐的步骤进行，其中包括全局安装 Hygen

npm i -g hygen

（这部分我不太确定。比如，既然我们现在正在这个项目中使用它，也许本地安装更明智，这样人们就不会忘记这样做？但这是否会让 CLI 继续工作？不知道。）

一旦开始运行，使用 Hygen 就非常容易。例如

hygen editor-component new --name NewExampleComponent

这将在名为_templates的最近文件夹中查找名为editor-component的文件夹，并构建它找到的所有内容。以下是我这三个文件的样子

请注意，文件名实际上并不重要，因为在每个文件的前部，您都解释了实际的脚手架文件应该放在哪里以及应该叫什么。这使您有机会对文件名和它们内部的内容进行模板化。

在我看来，模板化看起来像 Rails ERB。因此，如果我在 CLI 中传递--name Cool，我可以在模板中使用<%= name %>，并且如果您需要将它转换为大写或小写以及类似的操作，那么还有一些辅助函数可以使用。

运行命令，获取文件！

笔记

• 我也听说 Plop 很好，但我很快就被 Hygen 的语法和方法吸引住了。
• 我觉得应该有一个hygen jk命令来删除你刚做的脚手架，因为总是很有可能你会拼错某些东西，或者以其他方式搞砸它，而且不得不去找到那些文件并删除它们很烦人。
• 还有一个 VS Code 扩展，它非常酷，这意味着你甚至不必切换到终端来执行它或记住命令，你只需从命令面板中直接执行它