Run ES Module syntax (
export) in any browser — even IE!
At its core,
dimport is a polyfill for ES Module syntax, including dynamic imports!
And with it, you can serve modern ESM-driven application files to any browser.
For example, many browsers do support ESM syntax (aka,
<script type=module /> tags; however, not all of these support dynamic import statements since it came later.
In order to leverage the benefits of ESM today, a developer must choose between:
- dropping support for lagging browsers
- complicating their development process
- building and/or distributing multiple versions of their application
- abstaining from shipping ESM syntax at all 😢
dimport allows the developer to ship ESM today to all browsers without comproimse.
Better yet, the development and distribution processes are simplified, if not unchanged.
PS: Check out the
This module does not convert your ES2015+ syntax into ES5 or below!
dimport may allow older browsers to parse and interpret the ESM format, it does nothing to make the contents of your file(s) backwards compatible.
There are three "versions" of
dimport, each of which utilize different APIs and approaches to yield full ESM compatability.
Please note that all modes check for native
import() support first and foremost.
This means that
dimport won't do anything if it doesn't have to.
import statements are supported, this mode parses all dynamic
import()s and creates temporary
script[type=module] tags pointing to the resource's full, canonical URL. Once the temporary script loads, the originating Promise is resolved, returning the contents.
import() statements are dynamically rewritten to CommonJS modules so that their contents/exports are easily returned.
import statements are parsed early, ensuring full canonical URLs, and then the whole file is wrapped in a
Promise.all chain, guaranteeing each
import its desired module.
Takes the same approach as "nomodule", but inserts alternatives to
Important: You will need to supply your own Promise polyfill for IE support.
Don't miss the
It's possible to use
dimport in a variety of ways!
The simplest way is to connect a few
<script/> tags to unpkg.com:
<!-- Load the "module" version on browsers that can support it. --><!-- Load the "nomodule" version on older browsers – acts as fallback! -->
In the sample above, a browser will automatically choose which script
type to parse.
This means the two scripts can live side-by-side without loading your application twice!
Finally, the same application file (
bundle.js) can be used, despite the
You will also notice that the scripts have a
This the path to your application or your ESM-containing file you wish to load.
dimport has loaded, it circles back and see that its
<script/> caller also wants it to load a file.
dimport can load an inline script from its caller!
<!-- We can use any "mode" here, but choosing only 1 for simplicity -->
dimport is available for programmatic use and/or usable within your bundle (via Webpack or Rollup)
$ npm install --save dimport
;// or, without bundling;// Pass in URLs or file paths// ~> like `import()` usage;
API – Programmatic
Returns a Promise containing the module.
The URL of the script to import.
Note: Will be transformed into a full URL if not already – see
dimport columns yield support for both static and dynamic imports.
Important: Chart represents ESM syntax only!
Not indicative of ES2015+ syntax usage within your app.
* Indicates support with
Promise polyfill supplied
dynamic-import-ponyfill– The "first version" of
dimport– now deprecated.
shimport– Patient zero. Similar to "nomodule" mode. Made it "okay" to rewrite files on the fly.
MIT © Luke Edwards