microbundle
microbundle copied to clipboard
Multiple entry bundles
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
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 what about this https://github.com/developit/microbundle/issues/545#issuecomment-579869678?

does my expected output makes sense?
Oh you're right, I missed that. Sorry for closing this issue prematurely.
@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 :)
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!
Thank you @developit for taking the time and reply. I will give it a try asap and share my results 😀
how would amdName work with multiple files? seems like it currently sets all the files to the same amdName value ..
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?