Does nopcommerce support a custom bundler?

Hi, I'm working with a project that has a lot of JS files that uses modules. The 4.50x version supports bundling, but the default behaviour is to bundle all JS assets as text/javascript. For example

<script src="/js/MyBundle.Footer.scripts.js?v=XYZ123">

For modules to work those need to be loaded via

<script type="module" src="myModule.js"></script>

Here is another example. Let's say  

index.js

file that imports from other files like so

import { map } from "./map.js?v=2"; 
import { supplier } from './supplier.js?v=3';

What is the best option to support a bundling workflow that can hand'e the case the above?

Thanks

Did you figure out how to do this?

Is it possible to provide more details on what exactly needs to be done?

Best regards,
Atul

We ended up adding a bundling step as part of the deployment pipeline. Here are the steps at high level (you'll need to make changes based on your project setup):

Add package.json to run webpack build

{
  "name": "Scripts",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "build": "webpack --mode production"
  },
  "devDependencies": {
    "webpack": "^5.88.2",
    "webpack-cli": "^5.1.4"
  }
}

webpack.config.js

const path = require('path');

module.exports = {
  entry: {
    'gowell.core.map': './Plugins/My.Plugin/Scripts/index.js',
    // Add more entries as needed
  },
  output: {
    filename: '[name].bundle.js',
    path: path.resolve(__dirname, PATH_TO_OUTPUT_DIR),
  },
};

Then you can use

NopHtml.AppendScriptParts(ResourceLocation.Footer, "~/PATH_TO_OUTPUT_DIR/my.plugin.bundle.js");

Thanks for sharing this, it will help others as well :)

Best regards,
Atul