How to include dependencies in bundle?

[Deliaz]

It is a quite simple question, but it seems I missed an explanation.
How to build a bundle which includes all packages I import in my future lib? All I can see that my dist files try to require or include them, but do not include any third-party code.

[marvinhagemeister]

@Deliaz Can you share a repo or a codesandbox where it's not working out for you? microbundle will inline any dependency by default, unless the user opts out of it via --external

[developit]

@Deliaz it's likely that you have these installed as "dependencies" in your package.json. Dependencies declared as such should never be inlined into bundles, since that essentially delivers two copies of the same thing. Microbundle detects this and does the correct thing.

To inline dependencies, declare them as "devDependencies":

{
  "scripts": {
    "build": "microbundle"
  },

  "devDependencies": {
    // these will be inlined into the bundle
    "some-lib": "^1.0.0",
    "another-lib": "^2.0.0",

    "microbundle": "^12.0.0"
  },

  "dependencies": {
    // this will be kept as an external dependency require()'d by the bundle:
    "external-thing": "^1.2.3"
  }
}

[Deliaz]

@developit Thanks! That answered my question and solved the case.
Would it be great to mention this small detail somewhere in docs?

[developit]

Ah! Yes it would. I'll add that.

Update - looks like we have #454 to track.

[rchrd2]

Wouldn't it make sense to exclude dependencies for NodeJS but include them for the umd and modern browser bundles? It's not much use in the browser if it doesn't have the dependencies, and I don't think there's away to load them in without adding another build step.

[marvinhagemeister]

@rchrd2 For browsers dependency resolution currently only works via relative or absolute url paths. There is the import map spec to specify resolution of ids like preact -> https://example.com/preact.js but that doesn't work across browsers yet. Without that the module resolution depends on where the files are served from. This highly depends on the configuration of the specific webserver in use. Therefore we cannot make assumptions about that without breaking someone's code.

[olance]

@marvinhagemeister I guess @rchrd2 didn't mean to refer to any browser-side dependency loading mechanism, but instead meant that it would make sense to have dependencies (from package.json) be inlined by default in umd bundles (not sure about modern though), so that the output JS file is "standalone" and can be fully loaded from a <script> tag.

That's basically what --external none does if I'm not mistaken?
Since it does not make sense, as far as I can tell, to keep dependencies external for an umd build, it'd be nice if microbundle would do that automatically.

I've been looking at this myself for the last few hours, and I'm kinda lost actually, since --external none does have the expected effect, but it seems like the external function setup in the generated Rollup config by microbundle is not called at all for umd builds (i.e. console.log(format) in that function outputs cjs, es, ... but not umd)

Edit: it is actually called, but only if --format does not include cjs 🤔
Edit 2: that seems to be an issue from Rollup, which reuses the external "status" of cached modules instead of reevaluating it for each build. Not sure if that's by design or not, so I have opened an issue there: rollup/rollup#3874

[developit]

Yes - microbundle's external is different than Rollup's.

[dawsbot]

I'm still confused about how to generate a standalone umd bundle which works in an html script tag. My current umd bundle is trying to require external modules.

Did you solve this @olance?

[rschristian]

@dawsbot

By default, Microbundle leaves any modules listed in "dependencies" or "peerDependencies" in your package.json as external (i.e., they'll need to be provided at use).

If you want a stand-alone bundle, use --external none or move everything into "devDependencies".

[dawsbot]

@rschristian legend. This solved it for me 🙏

Is there a reason the UMD build does not do external none by default? I assumed all browser builds would require the imported dependencies to be included in the bundle.

[rschristian]

Is there a reason the UMD build does not do external none by default?

Fundamentally, "dependencies" in your package.json is a way of saying "I need these modules to be available in order to work correctly".

In Node, this means they will be installed when installing your module. In a browser context, this means they'll need to be available on the page.

Microbundle sees this intention and will therefore not inline them.

I assumed all browser builds would require the imported dependencies to be included in the bundle.

Not at all. If your module relies on (say) foo, you just add a script tag for foo before your module. foo is then available for your module to use.