KententデリバリーSDKをネイティブESMとVITEで使う方法

なぜネイティブESMとVite？

JavaScriptプロジェクトに取り組んでいるときは、私たちのサイトのすべての訪問者に提供されているJS束に機能のすべてのビットをバンドルするために使用されます.ネイティブESMを使用すると、束の周りを取得することができますし、近代的なブラウザに直接、動的にモジュールのJSコードを提供します.
このタスクを支援するツールの一つはViteです.それは効果的にWebPackを置き換えて、あなたの開発サーバの即座のコールドスタートと同様に生産のために最適出力を確実にします.順番に、すべてのコードはES 2015とより互換性があるように要求します.
Viteを使用してサイトを構築しようとすると、コードが準拠しない場合は、次のエラーが表示されます.❌ Uncaught ReferenceError: exports is not defined at ...エラーは、ビルドを生成した後に生成され、VITE最適化されたコードバンドルから来ます.それは、あなたのコードまたはあなたが使用するパッケージに残されていないいくつかのサポートされていない機能を意味します.
Kontent JS配信SDKはそれらの1つかもしれません.VITEで動作するように設定するには、次の手順を実行する必要があります.

配信SDKのターゲットENEXTバージョン

バージョン10.4.1からのKontent JS配信SDKは、サブフォルダであるENESNESでENEXTバージョンが付属していますので、コードを確実に使用する必要があります.しかし、もう少し複雑にするためには、kontent-coreパッケージに依存しているkontent-deliveryパッケージのCES ES 2015(最新版)を使用する必要があります.

それで、あなたは、ちょうどあなたがすべての輸入品を調整することができません.この問題を解決するには、その特定のサブフォルダにtell Vite to redirectすべての関連するインポートする必要があります.VITEはこの情報をrolulupに渡します-モジュールバンドルは内部的に使用します.Vite設定.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を参照してください.

DeleveryClientの設定にBrowserRichTextParserを追加する

SDKは、ブラウザーとノード環境で使用されるかもしれません.ノードです.JSはブラウザAPIを特徴としません、SDKはダイナミックに(大いにより大きい)ノードをロードすることができます.ランタイムコンテキストに基づくJSパーサー.しかし、角度に関するいくつかの互換性問題は、CommonJackのrequireの使用を必要としました.
あなたはウェブサイトを構築しているので、ブラウザの特定のパーサーをDeliveryClientの設定で定義することによってこれを回避できます.

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

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

そしてそれです.あなたは行きやすい🤗 npm run buildとnpm run serveを試してみてください.コンソールはきれいできれいです.
あなたがES 2015 +互換パッケージだけを使っているならば、あなたはゼロ待ちとより効果的な生産束でより良い開発経験を得ることができます.
あなたが新しい記事を見逃したくないならば、私の後を追ってください🐤