웹 구성 요소와 함께 매니페스트를 배송해야 합니다.

구성 요소 외에도 사용자 정의 요소 매니페스트는 라이브러리에 제공할 수 있는 가장 중요한 것입니다.

CEM(사용자 정의 요소 매니페스트)이란 무엇입니까?

사용자 정의 요소 매니페스트는 속성, 속성, 메서드, 이벤트, 슬롯, CSS 부분 및 CSS 변수를 포함하여 사용자 정의 요소/웹 구성 요소에 대한 메타데이터를 문서화하도록 설계된 스키마입니다. 구성 요소에 대한 모든 정보를 가져와 프로젝트의 단일 json 파일로 직렬화합니다.

사용자에게 왜 필요한가요?

이 표준화된 문서화 방법은 팀이 구성 요소 라이브러리를 사용하고 상호 작용하는 방식에 큰 가능성을 열어줍니다. 개발자는 Adobe Spectrum의 API 문서와 같은 문서화 목적으로 사용할 수 있습니다.

팀에서는 프레임워크, IDE 통합 및 Storybook과 같은 기타 도구에도 이를 사용할 수 있습니다.

구성 요소와 함께 제공하려는 특정 유형이나 프레임워크 통합을 생성하려는 경우 이는 좋지만 사용자의 모든 요구 사항을 예측하기는 어렵습니다. Vue.js 환경에서 사용할 구성 요소를 구축할 수 있지만 반응 환경에서 구성 요소를 사용해야 하는 다른 팀이 올 수도 있습니다. React 래퍼를 구축하고 배송할 때까지 기다리지 않고 팀에서는 CEM을 사용하여 로컬에서 자체 래퍼를 생성할 수 있습니다.

최근 한 가지 예는 팀이 Next.js 애플리케이션에서 Shoelace를 사용하여 시작하고 실행하도록 도왔을 때였습니다. Shoelace는 반응 래퍼를 제공하지만 Next.js가 서버 측 렌더링을 시도할 때 오류가 발생했습니다. 다행히 Shoelace에서 CEM을 배송했기 때문에 이를 사용하여 SSR에 안전한 새 포장지를 생성할 수 있었습니다.

다음은 예시 링크입니다:

CEM을 어떻게 생성합니까?

CEM을 생성하기 위한 몇 가지 도구가 있지만(웹 구성 요소 분석기 및 Lit 연구소에는 실험 도구가 있음) 제가 주로 사용하는 도구는 Custom Elements Manifest 분석기입니다.

이것은 몇 가지 이유로 훌륭한 옵션입니다:

• 여러 프레임워크를 지원합니다.
• 개발자가 분석기의 기능을 확장할 수 있는 훌륭한 플러그인 시스템을 갖추고 있습니다
• 사용하기 쉬울 뿐만 아니라 훌륭한 문서와 커뮤니티 지원도 제공됩니다.

맞춤 요소 채택을 개선하는 데 도움이 되도록 제가 만든 몇 가지 플러그인은 다음과 같습니다.

• IDE 통합

  • VS 코드 통합
  • JetBrains IDE 통합

• JS 프레임워크 통합

  • React 래퍼
  • Vue.js 유형
  • Solid.js 유형
  • 날씬한 유형
  • JSX 유형

참고: 이는 사전 생성된 CEM을 위한 CEM 분석기 플러그인 및 기능을 제공합니다. CEM 분석기를 사용하지 않더라도 걱정하지 마세요. 이러한 기능을 활용할 수 있습니다.

결론

사용자 정의 요소 매니페스트는 사용자 정의 요소 구성 요소 라이브러리의 사용자 채택을 가속화하는 훌륭한 도구입니다. 이를 제품의 일부로 제공함으로써 소비자에게 사용자 정의 요소를 사용할 때 소비자의 요구 사항이 충족되는지 확인할 수 있는 수단을 제공할 수 있습니다.

사용자 정의 요소를 작성하기 위한 라이브러리나 프레임워크를 선택할 때 특히 구성 요소를 다른 팀에서 사용할 경우 CEM을 생성할 수 있는 라이브러리나 프레임워크를 찾는 것이 좋습니다.

위 내용은 웹 구성 요소와 함께 매니페스트를 배송해야 합니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!