Browser library adding small features to native import maps
npm install @single-spa/import-map-injectorimport-map-injector is a browser library that adds a couple features to browser-native import maps:
1. Support for multiple import maps on one page (by combining them into a single import map)
1. Support for external import maps
The way this is accomplished is by combining multiple elements into a final .
The import-map-injector.js file must execute before any ES module is loaded by the browser. Therefore, it's encouraged to load import-map-injector.js via rather than install it as an npm package and then bundle it.
It's easiest to get best performance with import-map-injector by directly loading the import-map-injector.js file into your HTML page via . It is important to place the element after any elements, but before any or elements.
``html
`
As noted above, it's often easier to install import-map-injector via script rather than npm. Be aware that you might need to bundle/import import-map-injector separately from any web app you're trying to load, since import map installation is required before loading ES modules.
With those caviats in mind, import-map-injector is also available on npm:
`sh`
npm install @single-spa/import-map-injector
#### When bundling
The following information only applies if you're trying to bundle import-map-injector via webpack, rollup, esbuild, etc. It doesn't apply in other contexts:
Then it should just be included in your browser bundle with the following import.
`js`
import "@single-spa/import-map-injector";
It's better for performance to put the import statement at the top of your bundler's main entry file, since import map installation is crucial to page load times.
import-map-injector combines multiple elements into a final element, which is injected into the
element of the web page. The browser spec for import maps requires the to be injected before any ES modules are loaded via