A 2kb shim for
Suppose you have a module called
js/app.js. We want to:
- check to see if modules are fully supported in the current browser, including dynamic imports
- if they are, just use the native module loader
- if not, use Shimport
We can do this by adding a simple script tag to our
In the example above we loaded Shimport from the unpkg CDN. You can also grab the latest copy and include alongside your app's other files.
You can also
npm install shimport, in which case it will be available as
Most of the time you won't need to interact directly with Shimport, but it's useful to understand how it works. The script creates a global variable,
__shimport__, with the following methods:
load(url: string) => Promise<module>—
urlmust be fully qualified
define(id: string, deps: string, factory: (...) => void)— used internally to construct modules
Using with Rollup and code-splitting
esm output format:
// rollup.config.jsinput: 'src/app.js'output:dir: 'js'format: 'esm'experimentalCodeSplitting: true;
Skipping feature detection
If you want to always use Shimport, regardless of environment, you can create a script that loads Shimport with a
Using with a web worker
In a web worker environment, Shimport can't auto-start based on a script with
data-main. Instead, use the API:
;const href = 'path/to/my/module.js' locationhref;__shimport__;
Is it fast?
A future version of Shimport may use web workers to do the transformation off the main thread.
Specifically, it will not correctly handle cyclical dependencies or live bindings.
Because Shimport uses
fetch, and evaluates the transformed result, it will not work with some CSP and CORS configurations.