简化 JS 项目中的文件组织：使用 Bash 自动进行文件嵌套

在 JS 项目中，您通常会从组件的单个文件或任何与此相关的文件开始。

在某些阶段，您可能会发现需要额外的文件，用于测试等。

例如

• 我的组件.tsx
• 我的组件.spec.ts
• my-component.module.css
• my-component.stories.tsx

我避免这样做，
我觉得将所有相关文件放在一个文件夹中并使用索引文件命名约定要整洁得多。

因此，一旦我需要第二个文件，我通常会将 my-component.tsx 移动到
文件夹 my-component/index.tsx

索引.js 文件

对于 CommonJS 和 esm 模块，这两个文件是等效的

• 我的服务.ts
• 我的服务/index.ts

其中一个很好的功能是 import: import { Foo } from "./my-service" 将同时适用于 my-service.ts 和 my-service/index.ts 文件，而不需要对导入路径

问题烦恼

我觉得跳...的舞蹈有点累

$ mkdir -p components/my-service

$ git mv components/my-component.tsx components/my-component/index.tsx

如果我记错了该文件是否尚未受到版本控制，我可能会得到一个

fatal: not under version control, source=components/my-component.tsx,
 destination=components/my-component/index.tsx

-更多烦恼..

或者更烦人的是，如果我反过来弄错并使用 mv，我最终的 git 状态可能为

Changes not staged for commit:
        deleted:    components/my-component.tsx

Untracked files:
        components/my-component/

默认的 mv 命令被 git 视为删除和创建新文件

我的解决方案

我编写了一个 bash 脚本来自动化舞蹈

例子

$ ./nest.sh components/my-component.tsx

结果

$ tree components
components
└── my-component
    └── index.tsx

如果文件受版本控制，则脚本使用 git mv 否则使用普通旧 mv

实施例2

多个文件...

$ ./nest.sh components/my-component.tsx
$ ./nest.sh components/my-component.spec.ts
$ ./nest.sh components/my-component.css

结果

$ tree components
components
└── my-component
    └── index.tsx
    └── index.spec.ts
    └── index.css

在此处查看 Github Gist 中的 bash 脚本

我有一个名为 Nest 的脚本，它位于我的 $PATH 中的 bin 文件夹中，因此我可以在任何地方将其用作命令

以上是简化 JS 项目中的文件组织：使用 Bash 自动进行文件嵌套的详细内容。更多信息请关注PHP中文网其他相关文章！