내가 react cli를 작성하기로 결정한 방법과 진행 방법

아마도 나는 몇 번의 키 입력만으로 구성 요소를 생성할 수 있는 놀라운 도구인 angular cli에 의해 구원을 받을 수 없을 정도로 버릇이 생겼지만 반응 구성 요소를 생성해야 할 때마다 프로세스가 상당히 지루하고 반복적이라는 것을 알았습니다.

구성 요소 파일을 만듭니다.

props의 인터페이스를 보관할 별도의 파일을 만듭니다.

색인 파일을 생성하여 폴더에서 구성 요소를 내보냅니다.

스타일시트를 생성합니다.

테스트를 위한 파일 생성;

이야기를 만들어볼까요?

처음에는 많은 파일이 있지만 구성 요소 작업을 계속하기 전에 이러한 파일 중 일부에 중요한 상용구를 추가해야 합니다.

우리가 그것을 고칠 수 있습니까? 예, 우리는 호출될 때 주어진 경로에서 구성 요소/소품/인덱스 파일을 생성하기 위한 매우 기본적인 cli 명령을 처음으로 작성했다고 생각하고 작성할 수 있습니다. github에 올려 놓고 npx를 통해 호출했습니다. 제 역할은 했지만 유연성이 부족했습니다. 파일 생성에 사용하는 상용구는 기본적으로 고정되어 있으므로 미리 정의된 일부 패턴에 따라 구성 요소를 생성하는 데만 사용할 수 있었습니다.

나는 분명히 반응 구성 요소를 생성하기 위해 더 나은 도구가 필요했습니다. 보다 유연하고 확장 가능한 도구입니다. 그러나 구성 요소가 어떻게 만들어지는지 지시하지 않는 유연한 도구를 만드는 방법은 무엇입니까? 나는 로직이 없는 템플릿으로 전환하고 cli 도구가 생성할 엔티티로 명명된 하위 폴더로 채워진 템플릿 폴더를 갖는 아이디어를 생각해 냈습니다.

📂───templates
│   │
│   📂component
│   │  │───📃component.tsx.mustache
│   │  │   ...
│   │
│   📂hook
│   │  │───📃hook.ts.mustache
│   │  │   ...

그 시점에서 그러한 도구는 프레임워크에 구애받지 않고 주어진 템플릿 폴더와 하위 폴더 이름을 사용하여 원하는 수의 파일을 생성할 수 있다는 것이 명백해졌습니다. 알아내야 할 것은 그것이 받아들일 주장이었다.

하나는 생성할 항목의 경로, 즉 component이고 두 번째는 템플릿 디렉토리의 하위 폴더 이름에 해당하는 hook 두 가지 필수 항목을 생각해 냈습니다. 나는 또한 템플릿이 있는 사용자 정의 폴더를 제공하는 story 와 components/MyNewComponent 라는 두 가지 선택 사항이 있으면 좋을 것이라고 결정했습니다. 반응 성분.

그것은 멋져 보였고 더 이상 특정 프레임워크에 얽매이지 않는 것 같았습니다. 콧수염을 사용하면 템플릿을 만들고 대체를 위해 원하는 수의 키-값 쌍을 도구에 전달할 수 있습니다. 즉, 텍스트 파일 템플릿을 만들 수 있습니다.

// ./templates/random/random.txt.mustache
Hello, {{ name }}! I am {{ reaction }} to {{ verb }} you!

다음과 같은 인수를 전달하여 하나의 명령으로 Green Bob에 대한 파일을 생성합니다.

some-random-stuff/happy-to-see-bob-file --itemType=random  --name=Bob --reaction=happy --verb=see

이제 원래 예상했던 것보다 훨씬 시원했습니다. :)

내가 만든 cli 도구는 더 이상 사전 설정 템플릿에 바인딩되지 않았고 원래 상상했던 대로 반응하지도 않았습니다. 사전 설정 템플릿을 사용하여 설치 없이 호출할 수 있는 @merry-solutions/cli라는 npmpackage으로 변환하고 이를 사용하여 demo cra 앱을 만들었습니다. 그 자체로 활용되는 명령을 "캐스트"라고 합니다. 오픈 소스 이름 지정은 금형으로 무언가를 캐스팅하는 것과 같은 프로세스를 짜증나게 하기 때문입니다. 하드코딩된 유일한 것은 itemType 폴더 안에 항목을 생성한다는 것인데, 다음 업데이트에서는 설정 대상 폴더를 사용자 설정 인수에 위임할 생각입니다.

이제 패키지를 설치하지 않고도 단일 명령으로 반응 구성 요소와 후크를 생성할 수 있습니다.

npx @merry-solutions/cli Header --itemType=component

그렇다면 여기서 이야기의 교훈은 무엇입니까? 도구를 만드세요. 멋지고 때로는 처음에 예상한 것보다 훨씬 더 유용한 것을 만들 수 있습니다 ^_^