[4.2] JSライブラリを npm で管理する

[nanasess]

概要(Overview・Refs Issue)

• JSライブラリはすべて npm で管理したい #5185
• JSライブラリを npm で管理し、 webpack でバンドルする

ビルド方法

以下のコマンドで JS 及び scss のビルドが可能です

npm run build

JS ライブラリのみをビルドしたい場合は以下でも可能です

npx webpack

方針(Policy)

• html/template/<TemplateName>/assets/js/bundle.js を作成し、各テンプレートごとにバンドルするコードを記述する
• webpack でバンドルし、 html/bundle 以下へ出力する

JSライブラリの対応状況

• IE10 viewport(IE向けの対応なので削除)
• html5shiv(IE向けの対応なので削除)
• respond(IE向けの対応なので削除)
• jquery
• bootstrap(bootstrap5にバージョンアップしたいので別途対応)
• yubinbango(npmに存在しない)
• moment(tempusdominus-bootstrap-4 が依存)
• tempusdominus-bootstrap-4(開発中止のため bootstrap-datepicker へ変更)
• spin.js
• ace
• popper.js(bootstrap が依存)
• jquery.qrcode
• jquery-ui
• jQuery File Upload Plugin(開発終了のため https://github.com/pqina/filepond へ変更)
• jQuery Iframe Transport Plugin
• jQuery File Upload Processing Plugin
• jQuery File Upload Validation Plugin
• chart.js
• Ladda
• slick.js
• bootstrap-colorpicker(bootstrap に依存するため別途対応する)
• bootstrap-datetimepicker(bootstrap に依存するため別途対応する)

実装に関する補足(Appendix)

• html/bundle 以下へ出力するコードは、 EC-CUBE 本体で利用しているライブラリのみとする
• プラグインや各種テンプレートで、他の JavaScript ライブラリを使用する場合は個別に対応する

テスト（Test)

E2Eテストが通ることを確認

相談（Discussion）

マイナーバージョン互換性保持のための制限事項チェックリスト

• 既存機能の仕様変更はありません
• フックポイントの呼び出しタイミングの変更はありません
• フックポイントのパラメータの削除・データ型の変更はありません
• twigファイルに渡しているパラメータの削除・データ型の変更はありません
• Serviceクラスの公開関数の、引数の削除・データ型の変更はありません
• 入出力ファイル(CSVなど)のフォーマット変更はありません

レビュワー確認項目

• 動作確認
• コードレビュー
• E2E/Unit テスト確認(テストの追加・変更が必要かどうか)
• 互換性が保持されているか
• セキュリティ上の問題がないか
  • 権限を超えた操作が可能にならないか
  • 不要なファイルアップロードがないか
  • 外部へ公開されるファイルや機能の追加ではないか
  • テンプレートでのエスケープ漏れがないか

[chihiro-adachi]

動かしていってます。

• npm run buildでbuildできることを確認
• フロント・管理画面をざっとみてデザイン崩れ等の確認

[chihiro-adachi]

@nanasess
ありがとうございます、マージしました。