기본 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를 사용하면 제로 대기 및 보다 효과적인 프로덕션 번들로 훨씬 더 나은 개발 경험을 얻을 수 있습니다.
새로운 기사를 놓치고 싶지 않다면 내 팔로우 🐤
Reference
이 문제에 관하여(기본 ESM 및 Vite와 함께 Kontent Delivery SDK를 사용하는 방법), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/kontent_ai/how-to-use-kontent-delivery-sdk-with-native-esm-and-vite-1j00텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)