microbundle icon indicating copy to clipboard operation
microbundle copied to clipboard

Multiple entry bundles

Open nachaos opened this issue 4 years ago • 8 comments

Hi. I'm following the example provided here in order to bundle 3 different modules. The thing is that one of this modules requires the others, but when running microbundle -f cjs src/*.ts --no-compress the output doesn't preserve the require statements and instead bundle the dependencies inline.

I've created an example here https://github.com/nachaos/microbundle-example

Current output (using [email protected])

// /dist/c.js
var a = 'a';

var b = 'b';

var lib = 'lib';

var c = function c(_c) {
  return "" + a + b + _c + " - " + lib;
};

exports.c = c;
//# sourceMappingURL=c.js.map

Expected output

// /dist/c.js

var a = require('./a');

var b = require('./b');

var lib = 'lib';

var c = function c(_c) {
  return "" + a + b + _c + " - " + lib;
};

exports.c = c;
//# sourceMappingURL=c.js.map

Is there a way to configure microbundle in order to get what I expect?

Also, when trying with [email protected] this is the output. The require statements are preserved but with .ts file extensions, causing the usage of the module to fail.

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }

var a_ts = require('./a.ts');
var b = _interopDefault(require('./b.ts'));

var lib = 'lib';

var c = function c(_c) {
  return "" + a_ts.a + b + _c + " - " + lib;
};

exports.c = c;
//# sourceMappingURL=c.js.map

nachaos avatar Jan 26 '21 18:01 nachaos

Microbundle does not support multiple entry bundles. See #50 for the corresponding feature request. Let's continue any discussions over there. It's easier for us to track in a single issue.

marvinhagemeister avatar Jan 26 '21 18:01 marvinhagemeister

@marvinhagemeister what about this https://github.com/developit/microbundle/issues/545#issuecomment-579869678?

image

does my expected output makes sense?

nachaos avatar Jan 26 '21 18:01 nachaos

Oh you're right, I missed that. Sorry for closing this issue prematurely.

marvinhagemeister avatar Jan 26 '21 19:01 marvinhagemeister

@marvinhagemeister thanks for taking care and re-opening the issue. Hopefully I can get a hint on how to configure properly if possible, or just wait for https://github.com/developit/microbundle/issues/50 to be available :)

nachaos avatar Jan 26 '21 20:01 nachaos

Hiya @nachaos - the issue here is that your imports are for files. If you want to use multiple entries, you need to import packages:

// c.ts
-import { a } from './a';
+import { a } from 'microbundle-example/a';
-import b from './b';
+import b from 'microbundle-example/b';
import { lib } from './lib/lib';

const c = (c: string) => {
    return `${a}${b}${c} - ${lib}`;
};

export {
    c,
};

That should work (it's what we're using in Preact) - let me know!

developit avatar Feb 02 '21 20:02 developit

Thank you @developit for taking the time and reply. I will give it a try asap and share my results 😀

nachaos avatar Feb 05 '21 19:02 nachaos

how would amdName work with multiple files? seems like it currently sets all the files to the same amdName value ..

ahmadnassri avatar Mar 24 '21 04:03 ahmadnassri

I'm building small code snippets to be embedded on other sites. Each of the snippets needs to produce its own entry point which I've gotten working based on everything above. However, microbundle doesn't produce a CSS file per entry point nor does it bundle all of the CSS across entry points into one file. I'm using CSS modules. Has anyone figured out a workaround for this?

mwood23 avatar Mar 01 '22 18:03 mwood23