簡化 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中文網其他相關文章！