JS 프로젝트에서 파일 구성 간소화: Bash를 사용한 파일 중첩 자동화

JS 프로젝트에서는 종종 구성 요소 또는 그와 관련된 단일 파일로 시작합니다.

어떤 단계에서는 테스트 등을 위해 추가 파일이 필요할 수도 있습니다.

예:

• 내-컴포넌트.tsx
• my-comComponent.spec.ts
• 내-컴포넌트.모듈.css
• 내-컴포넌트.stories.tsx

그건 피합니다
관련 파일을 모두 폴더에 넣고 인덱스 파일 명명 규칙을 사용하는 것이 훨씬 깔끔하다고 생각합니다.

따라서 두 번째 파일이 필요하면 일반적으로 my-comComponent.tsx를 다음 파일로 이동합니다
폴더 내 구성요소/index.tsx

index.js 파일

CommonJS 및 esm 모듈의 경우 이 두 파일은 동일합니다.

• my-service.ts
• my-service/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 스크립트를 확인하세요

$PATH의 bin 폴더에 Nest라는 스크립트가 있으므로 어디서든 명령으로 사용할 수 있습니다

위 내용은 JS 프로젝트에서 파일 구성 간소화: Bash를 사용한 파일 중첩 자동화의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!