21.x
  1. その他のフレームワーク

JSSアプリをJSS 21.6にアップグレードする

日本語翻訳に関する免責事項

このページの翻訳はAIによって自動的に行われました。可能な限り正確な翻訳を心掛けていますが、原文と異なる表現や解釈が含まれる場合があります。正確で公式な情報については、必ず英語の原文をご参照ください。

Sitecore JavaScript Rendering SDKのバージョン21.6では、JSSパッケージ、その他のNPM依存関係、そしていくつかの環境変数に変更が加えられています。

!注始める前に

このトピックでは、以下の方法を示します:

  • ReactやVueアプリの依存関係や環境変数をアップグレードしましょう。
  • JSS Next.jsアプリをJSS 21.6にアップグレードしてください。
  • JSS AngularアプリをJSS 21.6とAngular 16にアップグレードしてください。

ReactおよびVueアプリにおける依存関係や環境変数のアップグレード

JSSテンプレートに基づいてアプリケーションをアップグレードするには、依存関係のアップグレードや環境変数名の置き換えが必要です。

アプリケーションのアップグレード:

  1. package.jsonファイルでは、すべての@sitecore-jss依存関係を~21.6.0バージョンに更新してください。

  2. アプリケーションのJSS_APP_NAME環境変数をSITECORE_SITE_NAMEにリネームしてください。

  3. もしあなたのアプリケーションがReactまたはNext.jsアプリであれば、@types/react依存関係をバージョン ^18.2.22に更新してください。

  4. シェルでは、以下のコマンドを実行してアプリ内の依存関係をインストール/更新します:

    npm install

JSS Next.jsアプリをJSS 21.6にアップグレードする

JSS 21.6では、SitecoreがNext.jsアプリケーションで使用されている 一部のサービスや構成をリファクタリングしました 。

JSS Next.jsアプリのアップグレード:

JSS AngularアプリをJSS 21.6およびAngular 16にアップグレードしてください

JSS 21.6では、AngularテンプレートがAngular 16を使用するよう更新されました。

!注始める前に

  1. package.jsonファイルでは:

    • 依存関係と開発依存関係をAngular 16にアップグレードしてください。

    • typescriptパッケージをバージョン~4.9.5にアップグレードしてください。

    • サーバーアーティファクトパスJSS慣例で求められるものを保持するために、build:serverとスクリプトpostbuild

      。 package.jsonファイル内でスクリプトを以下に更新してください:

      “build

      ”: “cross-env-shell ng run :server
      --output-path=$npm_package_config_buildArtifactsPath --output-hashing=none”, "postbuild
      ": "move-cli ./dist/main.js ./dist/server.bundle.js"

    • 廃止された --deploy-urlオプションを --base-href ng buildオプションに置き換えるには、build:clientスクリプトを以下に更新してください:

      "build

      ": "cross-env-shell ng build --base-href $npm_package_config_sitecoreDistPath/browser/ --output-path=$npm_package_config_buildArtifactsPath/browser/",

    • overridesの回避策を削除してください。

  2. シェルでは、以下のコマンドを実行してアプリ内の依存関係をインストール/更新します:

    npm install

  3. angular.jsonファイルでは:

    • allowedCommonJsDependencies設定を更新してください。

    • server.options構成では、outputPathプロパティを削除し、outputHashingプロパティをnoneの値を追加します。最終optionsには以下のものを含める必要があります。

      "options": { "outputPath": "dist/server", "main": "server.bundle.ts", "tsConfig": "src/tsconfig.server.json", "deleteOutputPath": false, "outputHashing": "none" }

  4. .eslintrcファイルでは、廃止された@angular-eslint/ng-cli-compatESLintルールをこのdiffに示すように@angular-eslint/recommendedルールに置き換え、他の古いルールを削除してください。

  5. /src/app/app.module.tsでは、以下の変更を加えます。

    • @angular/platform-browserパッケージからBrowserModuleとインポートTransferStateを削除し、代わりに次のインポート文を追加してください:

      import { APP_ID, NgModule, TransferState } from '@angular/core';

    • @angular/coreパッケージからNgModuleインポートを削除してください。

    • NgModuleデコレーターのimportsセットでBrowserModule.withServerTransition({ appId: 'my-app' })インポートを削除してください。

    • NgModuleデコレーター、providersセットに以下を追加してください:

      // The token is needed in cases when multiple applications are bootstrapped on a page { provide: APP_ID, useValue: 'my-app' },

  6. Angular専用のアップグレードニーズについてはAngular 15から16へのアップグレードガイド を参照し、アプリケーションカスタマイズの変更を実装してください。

この記事を改善するための提案がある場合は、 お知らせください!