ECMAScript 6+ をSXA Storefrontテーマに追加する

Version:

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

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

JavaScriptのクロスブラウザーの問題を回避するために、SXA StorefrontにはECMAScript (ES) ウォッチャーが含まれています。ECMAScript 6+ は、現在のブラウザーバージョンと古いブラウザーバージョンの両方のコードで使用できます。ソースフォルダ内のECMAScript 6+ コードは、スクリプトフォルダ内のファイルに自動的に変換されます。 Babelトランスコンパイラは、es-watchという名前のgulpタスクが実行されるときにコードをトランスパイルします。タスクは、ソースコードリポジトリのsrc\Project\Storefront\src\Scripts\gulpにあるtasksフォルダに格納されます。

メモ

Gulpで設定された別のプロジェクトを実行していると想定されており、変更がSitecoreコンテンツに同期されます。

ECMAScript 6+ をSXA Storefrontテーマに追加するには:

src\Project\Storefront\src\Scripts\gulp\config.jsファイルを開き、ファイルのes: セクションで次の構成値を指定します。

js: {
   path: 'Commerce/**/*.js',
   esLintUploadOnError: true
}
es: {
   path: '../Sources/Commerce/**/*.js',
   srcFolderName: 'Sources',
   destFolderName: 'Scripts'
},
loginQuestions[{

どこ：

pathは、変更を監視するスクリプトの相対パスです。
srcFolderNameはソースフォルダ名です。
destFolderNameは、宛先フォルダ名です。

ECMAScript 6+ コードをsrcFolderName項目で指定されたフォルダに保存します。
デフォルトのgulpタスクを開始するか、タスクを個別に実行するには、es-watchタスクを実行します。

ESウォッチャーは、ソースフォルダー内のECMAScript 6+ コードが下位互換性のあるJavaScriptコードに変換され、destFolderNameアイテムで指定されたフォルダーに保存されるようにします。

手記

テーマの追加と設定は、コマンドラインツールであるSXA CLIを使用して自動化できます。

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