Scaffolder — 提高开发速度和标准化文件约定。

在处理几个大项目时,我注意到不断出现一些耗时的任务。其中一项任务是创建文件夹并填写所有样板代码,同时保持项目结构一致。在意识到这个过程需要自动化后,我开始寻找解决方案并最终创建了自己的 CLI 工具🌈。

我必须做的第一件事是了解为什么这很烦人,我意识到发生这种情况有两个原因:

• 创建文件和文件夹可能是重复的、烦人的并且浪费时间。特别是如果某些内容对于每个新文件都会重复。

• 随着参与该项目的人数的增加,保持项目文件结构的一致性变得越来越复杂 — 每个团队成员都有他对文件命名和公开功能的偏好。

First,来了Yeoman。我尝试了 yeoman,但发现它太复杂了。此外,我希望模板成为项目的一部分(在某些情况下),并与代码一起提交给 git。因此,支持离线模板生成和项目与模板之间的紧密耦合。以上所有这些对于 yeoman 来说似乎都太复杂或根本不可能,所以在尝试了一个小时后,我转向了其他潜在客户。

Second,来了锅炉,我不喜欢这个,原因与我不喜欢 Yeoman 的原因相同。此外,它不是由 npm 管理的事实有点烦人。

第三,来了挫败感😞。在尝试了两种最流行的解决方案后,我意识到如果我想要一些适合我需要的东西,我应该继续自己编写。

这两个工具都棒极了,但就我的需要而言,它们都不对。

• 使此过程尽可能简单和无缝。

• 解决一般问题。意思是,它不会是特定于语言的,例如只有 React 或 Vue 模板。我可以创建任何我想要的形状、结构和语言的模板。

• 能够创建范围模板。这意味着,创建可以与其余代码一起提交给 git 的项目特定模板。

• 能够创建可在任何地方使用的“全局”模板。

• 使用 npm 管理。

---

什么是脚手架? Scaffolder 是一个非常简单而强大的工具,用于生成具有动态值的模板。

你问自己的模板是什么?模板可以是项目中的任何文件模式。

让我们看一个例子。在我目前正在进行的项目中,我们使用React作为我们选择的武器。

我创建的每个 React 组件通常驻留在以组件命名的文件夹中,并且在该文件夹中包含 4 个不同的文件。我们也更喜欢命名导出而不是默认导出。

因此,如果我想创建一个名为 MyAwesomeComponent 的组件。以下结构通常是结果。

• 以组件命名的文件夹,例如 MyAwesomeComponent。

• index.js — 组件。

• index.spec.js — 组件测试

• index.driver.js — 组件测试驱动。

• MyAwesomeComponent.scss

每个文件都有某种在项目中重复出现的模式。例如,为每个组件导入 React 和 MyAwesomeComponent.scss。

创建这种文件结构及其内容是一项非常重复的任务,可能会浪费大量时间。

---

首先,我需要在我的项目根文件夹(或链上的任何位置)中创建一个名为scaffolder 的文件夹。接下来,我将创建一个名为“组件”的文件夹或任何我想命名的模板。

文件夹名称稍后将转换为可通过 Scaffolder CLI 获得的命令。从而使我能够创建该特定模板。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--WulrLNxA--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/otd851s2kr3kefwxeenp.png)

要检查我当前位置有哪些模板可用,我可以运行npx scaffolder-cli ls。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--3JrFZxMj--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev- to-uploads.s3.amazonaws.com/i/o4b8a94gcicvkoxwoz6z.png)

提示:全局安装scaffolder-cli 以节省时间。

在该文件夹中,我将拥有所有文件,但为了保持简洁,我将专注于 index.js。

此文件中唯一动态的是组件名称,因此在这种情况下,index.js 应如下所示。

参数具有以下结构{{someParameter}}。CLI 将提示您为模板中的每个参数输入一个值。

现在我将运行npx scaffolder-cli i来生成我的组件,交互式 CLI 将引导我创建模板。

[](https://res.cloudinary.com/practicaldev/image/fetch/s--0IH51kHm--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to -uploads.s3.amazonaws.com/i/e0v3qu2r82fu3hcr3hlm.gif)

在上面的例子中,我全局安装了scaffolder,也就是说,我可以直接使用**scaff** 命令。

另一种方法是使用没有交互模式的 CLI(这对于创建快捷方式特别有用)。

npx scaffolder-cli create component componentName=MyAwesomeComponent --folder MyAwesomeComponent

这两个操作的结果将是一个名为 MyAwesomeComoonent 的文件夹,使用我们很棒的新模板创建。

文件的内容。

index.js

index.spec.js

index.driver.js

[](https://res.cloudinary.com/practicaldev/image/fetch/s--7fBg_3DE--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_auto%2Cw_880/https://dev -to-uploads.s3.amazonaws.com/i/3gerak0sp9se9kkgdggz.png)

如您所见,我们节省了创建文件夹、4 个文件和大约 30 行代码所需的时间,最重要的是,无需记住所有这些。

回顾我在文章开头所说的目标,我想说我们得到了五分之五。

---

使用这个很棒的 vscode 扩展轻松创建模板。

[![脚手架 vscode 扩展实战<br>

](https://res.cloudinary.com/practicaldev/image/fetch/s--hOrocjDH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to-uploads.s3.amazonaws.com /i/j7spa20f5slpjr801kv7.gif)](https://res.cloudinary.com/practicaldev/image/fetch/s--hOrocjDH--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://dev-to- uploads.s3.amazonaws.com/i/j7spa20f5slpjr801kv7.gif)

您经常发现自己想要共享模板,而不是强迫该模板的每个消费者将其保存在他的机器上。

Scaffolder 让您以一种简单的方式做到这一点!

您只需将模板上传到 scaffolder 文件夹下的 Github 存储库,就可以开始了!

要实际生成其中一个模板,您需要运行以下命令scaff i --from-github,系统将提示您输入要从中使用模板的存储库。

您可以在此处查看示例模板存储库。

有关共享 Scaffolder 模板的更多信息,请阅读 Scaffolder 存储库中的此部分。

如果有一个我经常使用的模板,我可以在我的 .zshrc 或 .bashrc 文件中创建一个快捷方式。

现在,我可以从任何地方输入comp MyAwesomeComoponent并节省几秒钟。

通过在我的根文件夹中创建一个脚手架文件夹,我可以确保我最喜欢的模板在我的文件系统中的任何位置都可用。

“全局”模板的使用在此处详细说明。

• 允许共享模板的别名。

此工具还有更多功能,例如定义全局模板、自定义问题和参数验证、前/后模板生成挂钩以及其他一些很酷的功能。有关更多信息、提示和示例,请查看Scaffolder repo。但是这篇文章应该让你轻松上手😄。

我希望你喜欢这篇文章!非常欢迎反馈、想法/功能请求和星星。不要忘记分享、反应和关注😃。