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

すべてのフレームワークでユーティリティの編集用インポートパスを置き換えてください

@sitecore-jss/sitecore-jss/utilsにあるすべての編集ユーティリティをより意味のある@sitecore-jss/sitecore-jss/editingに移します。その結果、コード内の古い位置を参照するimport文のパスを置き換える必要があります。

この変更は以下のユーティリティに影響を与えます:

• ChromeCommand 
• DefaultEditFrameButton 
• DefaultEditFrameButtonIds 
• DefaultEditFrameButtons 
• EditButtonTypes 
• EditFrameDataSource 
• ExperienceEditor 
• FieldEditButton 
• handleEditorAnchors 
• HorizonEditor 
• isEditorActive 
• mapButtonToCommand 
• Metadata 
• resetEditorChromes 
• WebEditButton

!警告古いルートは次のJSSリリースまでしか機能しません。したがって、必要な変更をできるだけ早く行うことを強くお勧めします。

Angularアプリのアップデート

!注このセクションのいくつかの手順はJSS 21.8のアップグレードガイドを繰り返しています。したがって、すでにこれらの変更を適用している場合は、ここで繰り返す必要はありません。

Angularアプリケーションの更新:

1. TypeScriptを ~5.2.2に更新してください。

2. Angularおよびそのすべてのコア依存関係をバージョン17に更新し、関連する依存関係も含めて。以下のリストはリリース時点の必要バージョンを示しています:

   • 角度的な主要依存関係:

     "@angular/animations": "~17.3.11", "@angular/common": "~17.3.11", "@angular/compiler": "~17.3.11", "@angular/core": "~17.3.11", "@angular/forms": "~17.3.11", "@angular/platform-browser": "~17.3.11", "@angular/platform-browser-dynamic": "~17.3.11", "@angular/platform-server": "~17.3.11", "@angular/router": "~17.3.11",

   • Angular開発依存関係:

     "@angular-builders/custom-webpack": "^17.0.2", "@angular-devkit/build-angular": "^17.3.8", "@angular-eslint/builder": "^17.5.2", "@angular-eslint/eslint-plugin": "^17.5.2", "@angular-eslint/eslint-plugin-template": "^17.5.2", "@angular-eslint/schematics": "^17.5.2", "@angular-eslint/template-parser": "^17.5.2", "@angular/cli": "~17.3.8", "@angular/compiler-cli": "~17.3.11", "@angular/language-service": "~17.3.11",

   • その他の主な依存関係:

     "@ngx-translate/core": "~15.0.0", "@ngx-translate/http-loader": "~8.0.0", "apollo-angular": "~6.0.0", "bootstrap": "^5.3.3", "core-js": "~3.37.1", "tslib": "^2.6.3", "zone.js" "~0.14.7",

   • その他の開発依存関係:

     "@types/node": "~20.14.10", "@typescript-eslint/eslint-plugin": "^7.16.0", "@typescript-eslint/parser": "^7.16.0", "body-parser": "~1.20.2", "eslint": "^8.56.0", "eslint-plugin-import": "2.29.1", "eslint-plugin-jsdoc": "48.7.0",

   • 残っているすべての依存関係は現在のバージョンのままにしておけます。

3. scripts/generate-config.tsファイルをカスタマイズしていなければ、22.1バージョンに置き換えてください。それ以外の場合は、以下のようにファイルを修正してください。

   • configTextプロップ割り当てで、configprop?の後にtoStringメソッド呼び出しの後にtrimメソッド呼び出しを追加します。例えば:

     configprop?.toString().trim()

   • その割り当ての最後に、改行文字の前のコンマをセミコロンに置き換えます。

     // Before }",\n`;

     // After }";\n`;

   以下はJSS 22.1に適した更新された割り当ての例です:

   configText += `config.${prop} = process.env.${constantCase(prop)} || "${configprop?.toString().trim()}";\n`;

4. また、scripts/generate-config.jsファイルでステップ3を繰り返してcomputedConfigprop。以下はJSS 22.1に適した更新課題の例です:

   configText += `config.${prop} = process.env.${constantCase(prop)} || ${ computedConfigprop?.toString().trim() };\n`;

5. /server.bundle.tsファイルをカスタマイズしていなければ、22.1バージョンに置き換えてください。それ以外の場合は、以下のようにファイルを修正してください。

   • 以下のimport文を探してください。

     import 'zone.js/dist/zone-node';

   • その文を次の文に置き換えてください。

     import 'zone.js';

6. src/polyfills.tsファイルをカスタマイズしていなければ、22.1バージョンに置き換えてください。それ以外の場合は、以下のようにファイルを修正してください。

   • 以下のimport文があれば、その点を探して削除してください。

     import 'zone.js/dist/zone-node'; import 'zone.js/dist/zone';

   • 新しいimport文を追加してください:

     import 'zone.js';

7. src/test.tsファイルをカスタマイズしていなければ、22.1バージョンに置き換えてください。それ以外の場合は、以下のようにファイルを修正してください。

   • zone.js/distを含むimport文を見つけて削除してください。

   • 新しいimport文を追加してください:

     import 'zone.js/testing';

8. 既存のアプリにAngular 17アップグレードで影響を受ける可能性のある他のカスタマイズ要素がある場合は、追加の変更点についてはAngular 17アップグレードガイド を参照してください。

9. アプリケーションのJSSパッケージを更新し、依存関係をインストールしてください。

Reactアプリの更新

編集サポートの簡素化により、sitecore-jss-react packageに新たな重大な変更が加わり、アプリにいくつかの修正が必要になりました。

Reactアプリケーションを更新するには:

1. ComponentConsumerPropsが削除されたため、もしそれを参照するimport文があれば、すべてWithSitecoreContextPropsに更新してください。

2. scripts/generate-config.jsファイルをカスタマイズしていなければ、22.1バージョンに置き換えてください。それ以外の場合は、以下のようにファイルを修正してください。

   • configTextプロップ割り当てでは、configprop?の後にtrimメソッド呼び出しを追加します。

     configprop?.trim()

   • その割り当ての最後に、改行文字の前のコンマをセミコロンに置き換えます。

     // Before }",\n`;

     // After }";\n`;

   以下はJSS 22.1に適した更新された割り当ての例です:

   configText += `config.${prop} = process.env.REACT_APP_${constantCase(prop)} || "${ configprop?.trim() }";\n`;

3. アプリケーションのJSSパッケージを更新し、依存関係をインストールしてください。

アプリの更新Vue.js

Vue.js申請を更新するには:

1. scripts/generate-config.jsファイルをカスタマイズしていなければ、22.1バージョンに置き換えてください。それ以外の場合は、以下のようにファイルを修正してください。

   • configTextプロップ割り当てでは、configprop?の後にtrimメソッド呼び出しを追加します。

     configprop?.toString().trim()

   • その割り当ての最後に、改行文字の前のコンマをセミコロンに置き換えます。

     // Before }",\n`;

     // After }";\n`;

   以下はJSS 22.1に適した更新された割り当ての例です:

   configText += `config.${prop} = process.env.VUE_APP_${constantCase(prop)} || "${ configprop?.trim() }";\n`;

2. また、scripts/generate-config.jsファイルでcomputedConfigpropのためにステップ1を繰り返します。以下はJSS 22.1に適した更新された課題の例です:

   configText += `config.${prop} = process.env.VUE_APP_${constantCase(prop)} || ${ computedConfigprop?.trim() };\n`;

3. アプリケーションのJSSパッケージを更新し、依存関係をインストールしてください。

アプリケーション依存関係の更新

アップグレードしたアプリケーションを正しく動作させるには、依存関係を更新する必要があります。

依存関係を更新するには:

1. 既存のアプリケーションのpackage.jsonファイルで、すべての @sitecore-jssパッケージをバージョン ~22.1に更新してください。

2. 以下のコマンドで依存関係をインストールします:

   npm install