JS プロジェクトのファイル構成の合理化: Bash を使用したファイルのネストの自動化

JS プロジェクトでは、コンポーネントなどの単一のファイルから始めることがよくあります。

ある段階で、テストなどのために追加のファイルが必要になる場合があります。

例:

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

私はそれを避けます、
すべての関連ファイルをフォルダー内に配置し、インデックス ファイルの命名規則を使用する方がはるかに整理されていると感じます。

したがって、2 番目のファイルが必要になったら、通常は my-component.tsx を
に移動します。 フォルダー my-component/index.tsx

Index.js ファイル

CommonJS モジュールと esm モジュールの場合、これら 2 つのファイルは同等です

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

これの優れた機能は、インポート: 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 スクリプトを参照してください

$PATH の bin フォルダーに、nest という名前のスクリプトがあるので、どこでもコマンドとして使用できます

以上がJS プロジェクトのファイル構成の合理化: Bash を使用したファイルのネストの自動化の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。