Update docs example on how to optimize JavaScript bundle

[pascalpepe]

The lean JavaScript example in v5 docs has not been updated from v4.

This PR suggests the two following changes in the Lean JavaScript code snippet:

• Remove the import of js/dist/util.js, which does not exist anymore.
• Change the comment about Popper.js to also mention dropdowns instead of just tooltips and popovers.

https://deploy-preview-31111--twbs-bootstrap.netlify.app/docs/5.0/customize/optimize/

[XhmikosR]

Yeah, I think this should be cleaned up. See #31111

[pascalpepe]

Alright, I just created this repo containing minimal working examples with Parcel, Rollup and webpack.

In all three examples, the bundle contains only the collapse and dropdown plugins (plus Popper.js, required for dropdowns). There's also a template with a navbar that uses both plugins.

Regardless of the bundler, imports are written like this:

import 'bootstrap/js/dist/collapse';
import 'bootstrap/js/dist/dropdown';

And actually there is no need to explicitly import Popper.js in the entry file because all bundlers will automatically include it if needed. It simply needs to be installed with npm in the same way as Bootstrap.

If this sounds ok for you, I can rebase and update this PR with cleaned imports and the correct comment about Popper.

[mdo]

@pascalpepe Holler if you need any more feedback here before opening up for reviews :).

[Johann-S]

LGTM @pascalpepe 👍

[pascalpepe]

Thanks for reviews ! Here's the updated PR:

• The .js extension has been removed from all imports as it is not needed.
• To mirror the section about SCSS customization that's just above this one, I updated the JS example like this:
  • The example now lists all available JS components.
  • Only the modal component is not commented out (to mirror the comments above: "If you’re not using a component, comment it out or delete it entirely").
  • The comment about Popper.js was previously in the code snippet. I moved it at the end of section.

Ready for review :)

[Johann-S]

Btw I think we should mention we use export default for those files, which mean if you want to create a new modal you have to do:

import Modal from 'bootstrap/js/dist/modal'

const modal = new Modal(document.getElementById('myModal'))

[mdo]

Any interest in the last comment @pascalpepe?

[XhmikosR]

@Johann-S can you add the changes you mentioned above?

[Johann-S]

@XhmikosR I'm unable to add a JS example in a callout, do you know how to do that?

[XhmikosR]

For some reason, the Netlify preview is broken; it throws a ReferenceError:

 Uncaught ReferenceError: ClipboardJS is not defined
    <anonymous> https://deploy-preview-31111--twbs-bootstrap.netlify.app/docs/5.0/assets/js/docs.min.js:38
    <anonymous> https://deploy-preview-31111--twbs-bootstrap.netlify.app/docs/5.0/assets/js/docs.min.js:52

I'll put this on hold, until I figure out why this happens.

Breaks docs JS

[XhmikosR]

Let's wait until we proceed with #31806 and #31802 because docs JS is broken with the current patch as is.

[XhmikosR]

So, it seems the error comes from ClipboardJS due to the "Exports" heading. Should probably be reported upstream, but in the meantime I renamed the heading to "Default Exports".

If someone could report it, that would help.