Optimieren Sie die Dateiorganisation in JS-Projekten: Automatisieren Sie die Dateiverschachtelung mit Bash

In einem JS-Projekt beginnt man oft mit einer einzelnen Datei für eine Komponente oder irgendetwas anderem.

Irgendwann stellen Sie möglicherweise fest, dass Sie zusätzliche Dateien benötigen, für Tests usw.

z.B.

• my-component.tsx
• my-component.spec.ts
• my-component.module.css
• my-component.stories.tsx

Das vermeide ich,
Meiner Meinung nach ist es viel übersichtlicher, alle zugehörigen Dateien in einem Ordner abzulegen und die Benennungskonvention für Indexdateien zu verwenden.

Sobald ich also eine zweite Datei benötige, würde ich my-component.tsx im Allgemeinen nach as verschieben
Ordner my-component/index.tsx

index.js-Dateien

Für CommonJS- und ESM-Module sind diese beiden Dateien gleichwertig

• my-service.ts
• my-service/index.ts

Eine nette Funktion dabei ist, dass der Import: import { Foo } from „./my-service“ sowohl mit my-service.ts- als auch mit my-service/index.ts-Dateien funktioniert, ohne dass Änderungen daran erforderlich sind der Importpfad

Das Problem Ärgernis

Ich finde es etwas ermüdend, den Tanz von... aufzuführen.

$ mkdir -p components/my-service

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

Und wenn ich mich falsch erinnere, ob die Datei noch nicht unter Versionskontrolle steht, erhalte ich möglicherweise eine

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

-mehr Ärger..

Oder vielleicht noch ärgerlicher: Wenn ich es andersherum falsch mache und mv verwende, könnte ich am Ende einen Git-Status von
haben

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

Untracked files:
        components/my-component/

Da der Standard-MV-Befehl von Git als Löschen und Erstellen einer neuen Datei behandelt wird

Meine Lösung

Ich habe ein Bash-Skript geschrieben, um den Tanz zu automatisieren

Beispiel

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

Ergebnisse in

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

Wenn die Datei unter Versionskontrolle steht, verwendet das Skript git mv, andernfalls verwendet es das einfache alte mv

Beispiel 2

mehrere Dateien...

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

Ergebnisse in

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

Sehen Sie sich hier das Bash-Skript in einem Github Gist an

Ich habe das Skript mit dem Namen „nest“ in einem bin-Ordner in meinem $PATH, sodass ich es überall als Befehl verwenden kann

Das obige ist der detaillierte Inhalt vonOptimieren Sie die Dateiorganisation in JS-Projekten: Automatisieren Sie die Dateiverschachtelung mit Bash. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!