기본 ESM 및 Vite와 함께 Kontent Delivery SDK를 사용하는 방법

네이티브 ESM과 Vite가 필요한 이유는 무엇입니까?

JavaScript 프로젝트에서 작업할 때 우리는 사이트의 모든 방문자에게 제공되는 모든 기능을 JS 번들로 묶는 데 익숙합니다. 기본 ESM을 사용하면 번들링을 우회하고 모듈식 JS 코드를 최신 브라우저에 직접 동적으로 제공할 수 있습니다.

이 작업에 도움이 되는 도구 중 하나는 Vite 입니다. Webpack을 효과적으로 대체하고 개발 서버의 즉각적인 콜드 스타트를 허용할 뿐만 아니라 프로덕션을 위한 최적의 출력을 보장합니다. 차례로 모든 코드가 ES2015 이상과 호환되도록 요청하므로 CommonJS는 더 이상 필요하지 않습니다.

Vite로 사이트를 구축하려고 하는데 코드가 준수하지 않으면 다음 오류가 표시될 가능성이 큽니다.
❌ Uncaught ReferenceError: exports is not defined at ...
오류는 프로덕션 빌드를 생성한 후 Vite 최적화 코드 번들에서 발생합니다. 이는 코드 또는 사용하는 패키지에 지원되지 않는 일부 기능이 남아 있음을 의미합니다.

Kontent JS Delivery SDK가 그 중 하나일 수 있습니다. Vite와 함께 작동하도록 구성하려면 다음을 수행해야 합니다.

Delivery SDK의 대상 ESNext 버전

버전 10.4.1의 Kontent JS Delivery SDK는 하위 폴더 _esNext에 ESNext 버전과 함께 제공되므로 코드에서 이를 사용하는지 확인하기만 하면 됩니다. 그러나 좀 더 복잡하게 하려면 kontent-core가 의존하는 kontent-delivery 패키지의 _es2015(최신) 버전도 사용해야 합니다.



따라서 하위 폴더 _esNext를 사용하도록 모든 가져오기를 조정할 수는 없습니다. 이 문제를 해결하려면 모든 관련 항목을 해당 하위 폴더로 가져와야 합니다tell Vite to redirect. Vite는 이 정보를 내부적으로 사용하는 모듈 번들러인 Rollup에 전달합니다. vite.config.ts는 다음과 같습니다.

export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@kentico/kontent-core': '@kentico/kontent-core/_es2015',
      '@kentico/kontent-delivery': '@kentico/kontent-delivery/_esNext'
    }
  }
})

모든 kontent-core 및 kontent-delivery 가져오기를 해당 하위 폴더로 리디렉션하고 있습니다.

참고: Vite를 사용하지 않고 Webpack에서도 동일한 작업을 수행해야 하는 경우 this page in their docs 을 참조하십시오.

DeliveryClient 구성에 BrowserRichTextParser 추가

SDK는 브라우저와 노드 환경 모두에서 사용할 수 있습니다. Node.js에는 브라우저 API가 없기 때문에 SDK는 런타임 컨텍스트를 기반으로 훨씬 더 큰 Node.js 파서를 동적으로 로드할 수 있습니다. 그러나 Angular와의 일부 호환성 문제로 인해 CommonJS를 사용해야 했습니다require.

웹 사이트를 구축 중이므로 DeliveryClient 구성에서 브라우저별 파서를 정의하여 이 문제를 해결할 수 있습니다.

import { BrowserRichTextParser } from '@kentico/kontent-delivery'

const client = new DeliveryClient({
      ...
      richTextParserAdapter: new BrowserRichTextParser()
    });

그리고 그게 다야. 갈 수 있습니다 🤗 npm run build 및 npm run serve를 시도하면 콘솔이 멋지고 깨끗해야 합니다.

ES2015+ 호환 패키지만 사용하는 경우 Vite를 사용하면 제로 대기 및 보다 효과적인 프로덕션 번들로 훨씬 더 나은 개발 경험을 얻을 수 있습니다.

새로운 기사를 놓치고 싶지 않다면 내 팔로우 🐤