From 461596e5ea10a975f30a647627fde5154cbab978 Mon Sep 17 00:00:00 2001 From: Mark Otto Date: Tue, 24 May 2022 10:52:46 -0700 Subject: [PATCH] Add docs info for using JS w/ ESM shim (#36414) * Docs: dependencies mgmt for vanilla ESM in browser Doc change for https://github.com/twbs/bootstrap/issues/31944 * Update javascript.md * Update javascript.md * Update .cspell.json * Update javascript.md * Update javascript.md * rewrite * Add link * edit * eslint-skip Co-authored-by: Caspar MacRae Co-authored-by: XhmikosR --- .cspell.json | 1 + .../docs/5.2/getting-started/javascript.md | 54 +++++++++++++++++-- 2 files changed, 50 insertions(+), 5 deletions(-) diff --git a/.cspell.json b/.cspell.json index efd3eb714e..11516df2dc 100644 --- a/.cspell.json +++ b/.cspell.json @@ -50,6 +50,7 @@ "Hoverable", "hreflang", "hstack", + "importmap", "jsdelivr", "Jumpstart", "keyframes", diff --git a/site/content/docs/5.2/getting-started/javascript.md b/site/content/docs/5.2/getting-started/javascript.md index fd676cf423..0b79ef8912 100644 --- a/site/content/docs/5.2/getting-started/javascript.md +++ b/site/content/docs/5.2/getting-started/javascript.md @@ -24,7 +24,11 @@ A better alternative for those using this type of frameworks is to use a framewo ## Using Bootstrap as a module -We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in your browser, if your [targeted browsers support it](https://caniuse.com/es6-module). +{{< callout >}} +**Try it yourself!** Download the source code and working demo for using Bootstrap as an ES module from the [twbs/examples repository](https://github.com/twbs/examples/tree/main/sass-js-esm). You can also [open the example in StackBlitz](https://stackblitz.com/github/twbs/examples/tree/main/sass-js-esm?file=index.html). +{{< /callout >}} + +We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootstrap.esm.min.js`) which allows you to use Bootstrap as a module in the browser, if your [targeted browsers support it](https://caniuse.com/es6-module). ```html ``` -{{< callout warning >}} -## Incompatible plugins +Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. [Read more about JS modules in the browser.](https://v8.dev/features/modules#specifiers) That's why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. However, this is further complicated by our Popper dependency, which imports Popper into our JavaScript like so: -Due to browser limitations, some of our plugins, namely Dropdown, Tooltip and Popover plugins, cannot be used in a ` + + + + +``` ## Dependencies