Context:
Given a project structure like this:
┌ src
├─┬ a
│ └── module.js
├─┬ b
│ └── module.js
└── util.js
Where both module.js files import util.js, using the following configuration:
export default {
experimentalCodeSplitting: true,
input: [
'src/a/module.js',
'src/b/module.js'
],
output: {
dir: 'bundle',
format: 'esm'
}
};
The following structure is output:
┌ bundle
├── chunk-af6d88c4.js
├── module.js
└── module2.js
Problem:
When using code splitting to reduce redundant code across a project, if there are multiple modules with the same file name in different directories, when rollup writes to the output directory it creates a flat structure. It is smart enough to recognize that multiple files have the same name, and appends a number to differentiate them. While this is working code, it becomes difficult to maintain references to those modules on the pages that require them - the developer has to know which number corresponds to which file.
Is there any way to get rollup to preserve the folder structure when outputting multiple bundles, to show file relationships more clearly? Or if this is not possible through rollup alone, is there another solution that can be taken?
preserveModulesflag? – Gotcher