multiple entry modules

[elalienx]

Hi, there I an example of a package.json where I can see how to configure the multiple entry modules or any documentation?

[elalienx]

Also, when I try to call the bundled js file example (src/Assembler.ts becomes dist/Assembler.js) I get the error
ReferenceError: Can't find variable: module

[Xiphe]

Hi, not sure if I understand correctly but multiple entries are not yet supported by microbundle (AFAIK). See #50

For your second question it would help if you could provide steps to reproduce the problem. Seems as if it's tied to your application code

[elalienx]

Too bad for the multiple entries.
For the second question.

I have a Typescript project the directory is:
assembler/

• index.html
• index.js
• dist/
  • Assembler.js
  • ...some d.ts files
• scr/
  • Assembler.ts
  • ...other ts files

When I compile using micro bundler it creates the dist folder with the final Assembler.js that contains the rest of the ts files as a single file.

But when I open index.html that in turn calls index.js I get the error:

Safari

SyntaxError: Importing binding name 'default' cannot be resolved by star export entries.

Chrome

Uncaught SyntaxError: The requested module './dist/Assembler.js' does not provide an export named 'default'

I want to know if I can open the files created by Microbundler from a local server without needing web pack.

[elalienx]

Update: I manage to get the code running by importing Assembler.mjs instead of .js inside the index.js file

[developit]

Microbundle does support multiple entries that produce multiple outputs:

{
  "main": "dist/Assembler.js",
  "scripts": {
    "build": "microbundle src/*.ts"
  }
}

This will produce the following structure:

dist/
  a.js
  b.js
  c.js
src/
  a.ts
  b.ts
  c.ts
  lib/
    other.ts   <-- `src/*.ts` does not match this, so it will be bundled into a, b and c

[dohomi]

@developit if microbundle src/*.ts is used multiple entry points are getting created. Is it somehow possible to still have one index.js file wich combines all the multiple files and support imports like:

import {MyComponent} from 'my-module'

Currently it seems that the multiple entry points needs to be adressed like:

import MyComponent from 'my-module/MyComponent'

Or do I misunderstand something? I am little bit confused how to handle this. I want to bundle a component repo with multiple components which have on single component basis Material-UI dependencies. I want to make sure that codesplitting is active.
Thanks for you advise

[rschristian]

@dohomi Create an index.ts file that re-exports all your components and have Microbundle build that. You're currently telling Microbundle to individually build each .ts file, and it's doing just that.

export { MyComponentA } from './components/MyComponentA';
export { MyComponentB } from './components/MyComponentB';
export { MyComponentC } from './components/MyComponentC';

[dohomi]

@rschristian if I use one index.ts file then all dependencies of the components are loaded and if I want to only load ComponentA the dependencies of ComponentB will be loaded as well.

[rschristian]

@dohomi Any tool that can tree shake will shake out those unused imports (and their dependencies).

Regardless, you asked

Is it somehow possible to still have one index.js file wich combines all the multiple files

and this is how you do it. I don't quite understand how you're expecting this to work otherwise?

[dohomi]

@rschristian the main issue in my use case are external dependencies in the different components. I have a small library where I have materail-ui dependencies in the components.
ComponentA => imports datepicker and moment
ComponentB => imports textfields
if I have one index.ts all external dependencies of ComponentA,ComponentB will be loaded first as far as I could see, so the tree shake will only apply for the component code but not external dependencies.
Thanks for your advise though I appreciate

[rschristian]

@dohomi All of the popular build tools should be more than capable of ensuring those external dependencies aren't in your bundle if the component they're included in is not used.

[dohomi]

@rschristian thanks for the clarification 👍