es-modularize
A browser only tool for converting npm package to ES module.
This library allows the following code to work correctly in browser thanks to a modern feature <script type="importmap">
.
// entry.js
import React from "react";
import ReactDOM from "react-dom";
Currently only UMD
packages are supported. For browser import map support, you might need this tool:
https://github.com/guybedford/es-module-shims
Example
Synchronous example:
<!-- include this library -->
<script src="https://unpkg.com/es-modularize"></script>
<!-- define import maps -->
<script>
ESModularize.build({
react: ESModularize.load("https://unpkg.com/react@latest/umd/react.development.js").sync().umd("React"),
"react-dom": ESModularize.load("https://unpkg.com/react-dom@latest/umd/react-dom.development.js")
.sync()
.umd("ReactDOM"),
});
</script>
<!-- now module imports can work -->
<script type="module" src="entry.js"></script>
Asynchronous example:
<!-- include this library -->
<script src="https://unpkg.com/es-modularize"></script>
<!-- define import maps -->
<script>
(async () => {
ESModularize.build({
react: (await ESModularize.load("https://unpkg.com/react@latest/umd/react.development.js").async()).umd("React"),
"react-dom": (
await ESModularize.load("https://unpkg.com/react-dom@latest/umd/react-dom.development.js").async()
).umd("ReactDOM"),
});
// now module imports can work, but script elements should be created asynchronously.
document.body.appendChild(Object.assign(document.createElement("script"), { type: "module", src: "entry.js" }));
})();
</script>
License
__________________
< The MIT license! >
------------------
\ ^__^
\ (oo)\_______
(__)\ )\/\
||----w |
|| ||