EC-CUBE 4.3 Webpack Enhanced

This fork purpose is to update webpack configuration to include custom js and scss in an enahanced setup.

Features

• The following setup is made for scopes html/admin html/default and a new html/shared scope
• new customize folders for custom js
• new initialize.js script acts as a central point to init classes made in customize folders
• initialize.js is called in bundle.js of their respective scope
• new html/shared scope that is called in both admin and default scopes to house the js/scss needed to run in both admin and front applications
• new html/template/shared/assets/scss/style.scss that is included in both default and admin style.scss files to have common styles applied in both scopes
• check webpack.config.js to understand the setup done.
• same pattern can be added to any new theme created in the project
• new Plugin generator command class app/Customize/Command/PluginGenerateCommand.php to generate new plugins that follows the same setup above and give the plugins the ability to use commonJS webpack configured js classes and use scss instead of injecting js and css files directly in templates of the plugin.
  • The new plugin has a refactored config entity with a new table structure for better key value config creation
  • new assets structure that follows the same pattern made in html scope
  • Example Plugin include TestPlugin generated by the new command
  • php bin/console app:plugin:generate
    • app/Plugin/TestPlugin/Resource/assets/js/admin/bundle/initializer.js
    • app/Plugin/TestPlugin/Resource/assets/js/default/bundle/initializer.js
    • app/Plugin/TestPlugin/Resource/assets/js/shared/bundle/initializer.js

Installation

• clone repo
• follow original project installation instructions
• install TestPlugin to see it in effect
  • php bin/console eccube:plugin:install --code=TestPlugin
  • php bin/console eccube:plugin:enable --code=TestPlugin
• build assets of plugin
  • npm run build or a variation of it

---

---

---

EC-CUBE 4.3 Webpack 拡張構成

このフォークの目的は、Webpack の構成を更新し、カスタム JS と SCSS を拡張された構成で含めることです。

特徴

• この構成は、html/admin、html/default、および新しく追加された html/shared スコープを対象としています。
• カスタム JS を格納するための新しい customize フォルダを用意。
• initialize.js スクリプトを新設し、customize フォルダ内で作成されたクラスを初期化するための中央管理ポイントとして機能します。
• initialize.js は、それぞれのスコープの bundle.js 内で呼び出されます。
• html/shared スコープを新設し、管理画面(admin)とフロント(default)の両方で共通して必要な JS/SCSS を格納。
• 共通スタイルを適用するために、html/template/shared/assets/scss/style.scss を新設し、admin と default の両方の style.scss に読み込まれます。
• 構成の詳細は webpack.config.js を参照してください。
• この構成と同様のパターンは、プロジェクト内で作成される新しい theme にも適用可能です。
• プラグイン生成用の新しいコマンドクラス app/Customize/Command/PluginGenerateCommand.php により、上記構成を踏襲した新規プラグインを生成可能。
  • 生成されるプラグインは、より柔軟なキー・バリュー構成が可能なように config エンティティが新しいテーブル構造でリファクタされています。
  • html スコープに準じた新しいアセット構成。
  • 例として、以下のコマンドで生成された TestPlugin が含まれます：
  • php bin/console app:plugin:generate
    • app/Plugin/TestPlugin/Resource/assets/js/admin/bundle/initializer.js
    • app/Plugin/TestPlugin/Resource/assets/js/default/bundle/initializer.js
    • app/Plugin/TestPlugin/Resource/assets/js/shared/bundle/initializer.js

インストール方法

• リポジトリをクローン
• オリジナルのプロジェクトのインストール手順に従ってください
• TestPlugin をインストールして、動作を確認
  • php bin/console eccube:plugin:install --code=TestPlugin
  • php bin/console eccube:plugin:enable --code=TestPlugin
• プラグインのアセットをビルド
  • npm run build などのコマンドを実行