🕵️‍♀️ '하이젠' 첫인상

며칠 전 github에서 hygen.io hygen jondot/hygen 이라는 새로운 도구를 발견했습니다.

repo의 설명은 다음과 같습니다.

hygen is the simple, fast, and scalable code generator that lives in your project.

결론은 cli 기반 스캐폴딩 도구라는 것입니다. ejs 과 front-matter 의 이상한 조합을 사용합니다.

어떻게 작동합니까?

먼저 npm을 사용하여 CLI 도구를 전역으로 설치합니다.

npm install hygen -g

그런 다음 hygen init self를 호출하여 스캐폴드를 생성하고, 스캐폴드를 생성하기 위해 일종의 메타 맞습니까?

이렇게 하면 hygen generator new component 를 실행할 수 있습니다.

이제 _templates 및 generator 디렉토리가 있는 component 폴더가 있어야 합니다.

새 구성 요소가 되도록 사용자 지정할 수 있는 임시 파일_templates/component/hello.ejs.t이 내부에 표시됩니다. hello.ejs.t의 이름을 simple.ejs.t로 바꾸고 이것을 안에 넣습니다.

---
to: src/components/<%= name %>.tsx
---
import React from 'react'

export function <%= name %>(props) {
  return <h1>Hello, {props.name}</h1>;
}

그런 다음 다음을 실행할 수 있습니다.

hygen component new --name Example

그리고 짜잔! 새 구성 요소를 쉽게 만들 수 있습니다.

프롬프트 사용

아주 멋진 기능 중 하나는 프롬프트 기능입니다. 생성기 디렉토리에 prompt.js 파일을 추가하기만 하면 명령에 플래그로 제공하는 대신 다른 ejs 변수에 대해 명령을 실행할 때 프롬프트를 받을 수 있습니다.

쉘

한 가지 좋은 추가 기능은 생성기의 전면에서 쉘 명령을 실행하는 옵션입니다. 이것은 부작용의 더 나은 파이프라이닝을 허용합니다.

--------
sh: echo "hi"
--------

열린 질문

머리말 지원으로 .ejs.t vscode 구문을 얻을 수 있습니까? 아마도 .ejs를 사용하시겠습니까?

.t 파일 유형을 선택하는 vscode에 대한 한 가지 가능한 해결 방법은 vscode 기본 설정에 파일 연결을 추가하는 것입니다.

{
  "files.associations": {
    // @see https://dev.to/reggi/using-hygen-3g3i
    "*.ejs.t": "html"
  }
}

결론

나는 그것을 지금까지 사랑한다! 워크플로가 크게 개선되었으며 계속해서 새로운 사용 사례를 찾고 있습니다. ❤️❤️❤️❤️❤️