diff options
| author | Mark Otto <markdotto@gmail.com> | 2022-05-20 23:32:32 +0300 |
|---|---|---|
| committer | Mark Otto <markdotto@gmail.com> | 2022-05-20 23:35:44 +0300 |
| commit | 0b1f575e59c6954a15e12beb10666c99512520f6 (patch) | |
| tree | 56a2b85e2e06018d3121bc2a5dea8983a5452d38 | |
| parent | 2a2151da15be4b9ca8a015d5b51d3dcf5354c788 (diff) | |
rewrite
| -rw-r--r-- | site/content/docs/5.2/getting-started/javascript.md | 27 |
1 files changed, 18 insertions, 9 deletions
diff --git a/site/content/docs/5.2/getting-started/javascript.md b/site/content/docs/5.2/getting-started/javascript.md index faf88e1a41..23ea9d2b1a 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 <script type="module"> @@ -35,12 +39,19 @@ We provide a version of Bootstrap built as `ESM` (`bootstrap.esm.js` and `bootst </script> ``` -{{< callout warning >}} -## Dependencies for vanilla ESM in the browser require an `importmap` +Compared to JS bundlers, using ESM in the browser requires you to use the full path and filename instead of the module name. That's why we use `'bootstrap.esm.min.js'` instead of `'bootstrap'` above. This is further complicated by our Popper dependency, which imports Popper like so: + +```js +import * as Popper from "@popperjs/core" +``` + +If you try this as-is, you'll see an error in the console like the following: -In order to support build tools, npm dependencies - external dependencies such as Popper are `import`ed with their npm package name (e.g. `@popperjs/core`), to make this work in the browser you need to define an `importmap` which resolves arbitrary names to fully-qualified or relative URIs. +```text +Uncaught TypeError: Failed to resolve module specifier "@popperjs/core". Relative references must start with either "/", "./", or "../". +``` -If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap` then you will need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) library. For example: +To fix this, you can use an `importmap` to resolve the arbitrary module names to complete paths. If your [targeted browsers](https://caniuse.com/?search=importmap) do not support `importmap`, you'll need to use the [es-module-shims](https://github.com/guybedford/es-module-shims) project. Here's how it works for Bootstrap and Popper: ```html <!doctype html> @@ -53,7 +64,7 @@ If your [targeted browsers](https://caniuse.com/?search=importmap) do not suppor </head> <body> <h1>Hello, modularity!</h1> - <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Pop, over</button> + <button id="popoverButton" type="button" class="btn btn-primary btn-lg" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="ESM in Browser" data-bs-content="Bang!">Custom popover</button> <script async src="https://cdn.jsdelivr.net/npm/es-module-shims@1/dist/es-module-shims.min.js" crossorigin="anonymous"></script> <script type="importmap"> @@ -64,7 +75,7 @@ If your [targeted browsers](https://caniuse.com/?search=importmap) do not suppor } } </script> - <script type="module"> + <script type="module"> import * as bootstrap from 'bootstrap' new bootstrap.Popover(document.getElementById('popoverButton')) @@ -73,8 +84,6 @@ If your [targeted browsers](https://caniuse.com/?search=importmap) do not suppor </html> ``` -{{< /callout >}} - ## Dependencies Some plugins and CSS components depend on other plugins. If you include plugins individually, make sure to check for these dependencies in the docs. |