Parcel: Build Destination Relative to Multi Input

[ctsstc]

❔ Question

Is there a way to have multiple file entry points build out to a destination relative to the entry point? Currently all I could find is a single destination folder.

🔦 Context

If you had something like the following structure given the entry point below, is there a way to have it build the JS into a destination folder that's next to each src folder? So you would end up with dist in subfolder1 and subfolder2. I was looking at the API but it doesn't seem that there's a way to

Entry Point: ./app/**/src/*.js

.
└── app
    ├── subfolder1
    │   └── src
    │       └── some.js
    └── subfolder2
        └── src
            ├── another.js
            └── some-more.js

Expected

.
└── app
    ├── subfolder1
    │   ├── dist
    │   │   └── some.js
    │   └── src
    │       └── some.js
    └── subfolder2
        ├── dist
        │   ├── another.js
        │   └── some-more.js
        └── src
            ├── another.js
            └── some-more.js

Another Possible Outcome:

.
└── app
    ├── subfolder1
    │   ├── some.js
    │   └── src
    │       └── some.js
    └── subfolder2
        ├── another.js
        ├── some-more.js
        └── src
            ├── another.js
            └── some-more.js

Maybe there could be an option with the API to get the current directory of the current file and then you could explicitly set an output path.

💻 Code Sample

Nope.jpg

Maybe something in a custom API build like:

const options = { output: fileIn => `${fileIn}/../someDirectory` };
new Bundler(entryFiles, options);

For the CLI maybe you could just have a relative-output option so you could specify ` --relative-output ./../someDirectory

🌍 Your Environment

| Software | Version(s) |
| ---------------- | ---------- |
| Parcel | 1.11.0 |
| Node | v11.1.0 |
| npm/Yarn | 6.7.0 |
| Operating System | Mac OS |

[ctsstc]

Here's my current implementation to handle this for now.

const Bundler = require('parcel-bundler');

const buildType = process.env.BUILD_TYPE || 'build';

const bundleDefaults = {
  watch: buildType == 'watch',
  contentHash: false,
  minify: false,
  sourceMaps: false, // only because inline maps are not supported yet.
  hmr: false
}

const subfolder1Bundle = {
  entryFiles: 'app/subfolder1/src/*.js',
  options: {
    ...bundleDefaults,
    outDir: 'app/subfolder1/src',
  }
};

const subfolder2Bundle = {
  entryFiles: 'app/subfolder2/src/*.js',
  options: {
    ...bundleDefaults,
    outDir: 'app/subfolder2/src',
  }
};

const bundles = [
  subfolder1Bundle,
  subfolder2Bundle
];

(async function() {
  // forEach will run in parallel
  bundles.forEach(async bundle => {
    // Initializes a bundler using the entry point location and options provided
    const bundler = new Bundler(bundle.entryFiles, bundle.options);

    // Run the bundler, this returns the main bundle
    // Use the events if you're using watch mode as this promise will only trigger once and not for every rebuild
    await bundler.bundle();
  });
})();

[VitaliyR]

@ctsstc it's great solution until you will use shared resources (svg/images) and they'll be just duplicated for each bundle with own name :(

[github-actions[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 14 days if no further activity occurs.