A browser only tool for converting npm package to ES module.

Overview

es-modularize

Publish CI npm version

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/[email protected]/umd/react.development.js").sync().umd("React"),
    "react-dom": ESModularize.load("https://unpkg.com/[email protected]/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/[email protected]/umd/react.development.js").async()).umd("React"),
      "react-dom": (
        await ESModularize.load("https://unpkg.com/[email protected]/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 |
                ||     ||
You might also like...

A CLI tool to make Taobao's npm mirror sync your package immediately.

npm-mirror-sync A CLI tool to make Taobao's npm mirror sync your package immediately. 让淘宝的 NPM 镜像立即收录你的包的新版本。 背景 相信国内小伙伴都在用淘宝的 NPM 镜像(npmmirror.com)作为

Jun 9, 2022

Userland module that implements the module path mapping that Node.js does with "exports" in package.json

exports-map Userland module that implements the module path mapping that Node.js does with "exports" in package.json npm install exports-map Usage co

May 31, 2022

Tooling to automate converting .xlsx localisation to in-game compatible .json files for Vampire Survivors

vampire-survivors-localisation This tooling is used to automate converting .xlsx localisation to in-game compatible .json files for the game Vampire S

Jun 26, 2022

A JavaScript-powered CLI for converting HTML into PDFs

Print Ready by Nicholas C. Zakas If you find this useful, please consider supporting my work with a donation. Description A JavaScript-powered CLI for

Sep 18, 2022

A Chrome extension for converting ENS names into links to daopanel chat.

A Chrome extension for converting ENS names into links to daopanel chat.

daopanel connect A Chrome extension that links Twitter usernames to daopanel chat conversations Example daopanel chat is powered by XMTP Github Action

Aug 23, 2022

A JavaScript library for converting to/from Roman numerals.

romanice - Convert to/from Roman numerals A JavaScript library for converting to/from Roman numerals, e.g., 3888 ↔ MMMDCCCLXXXVIII, 38888 ↔ ↂↂↂↁↀↀↀⅮⅭⅭ

Jul 18, 2022

Linkify is a JavaScript plugin for finding links in plain-text and converting them to HTML a tags.

Linkify Linkify is a JavaScript plugin. Use Linkify to find links in plain-text and convert them to HTML a tags. It automatically highlights URLs, #

Sep 13, 2022

A module federation SDK which is unrelated to tool chain for module consumer.

A module federation SDK which is unrelated to tool chain for module consumer.

hel-micro, 模块联邦sdk化,免构建、热更新、工具链无关的微模块方案 Demo hel-loadash codesandbox hel-loadash git Why hel-micro 如何使用远程模块 仅需要一句npm命令即可载入远程模块,查看下面例子线上示例 1 安装hel-micr

Sep 21, 2022

🌈 GitHub following, followers, only-following, only-follower tracker 🌈

🌈 GitHub following, followers, only-following, only-follower tracker 🌈

github-following-tracker GitHub following, followers, only-following, only-follower tracker 👀 Just enter your GitHub name and track your followings!

Jun 15, 2022

Uses marked-terminal to render a README.md for any npm module in the terminal.

Uses marked-terminal to render a README.md for any npm module in the terminal.

modhelp Uses marked-terminal to render a README.md for any npm module in the terminal. Now with built-in pager! Page up/down, arrow keys to scroll lin

Feb 8, 2022

Get any Candy Machine ID in seconds with this npm module!

What Does it do? Grabs Candy Machine ID of any v1 or v2 candy machine websites. Installation npm i candymachinescraper --save Example Usage // Get Can

Jul 30, 2022

BHIMUPIJS is a npm module which can validate, verify and generate QR Codes for UPI IDs.

BHIMUPIJS is a npm module which can  validate, verify  and generate QR Codes for UPI IDs.

bhimupijs BHIMUPIJS is a npm module which can validate, verify and generate QR Codes for UPI IDs. Installation Install this npm package globally. npm

Aug 16, 2022

Check NPM package licenses

NPM License Checker As of v17.0.0 the failOn and onlyAllow arguments take semicolons as delimeters instead of commas. Some license names contain comma

Sep 23, 2022

Open the npm page, Yarn page, or GitHub repo of a package

npm-home Open the npm page, Yarn page, or GitHub repo of a package Install $ npm install --global npm-home Usage $ npm-home --help Usage $ npm

Aug 12, 2022

Check whether a package or organization name is available on npm

npm-name Check whether a package or organization name is available on npm Install $ npm install npm-name Usage import npmName from 'npm-name'; // Ch

Sep 21, 2022

Package manager faster than NPM

Pine Script holder that runs faster than NPM and yarn Pine is a npm and yarn run like module, that allows you to organize your scripts and run them FA

Jul 10, 2021

NPM Package that simplifies Auth with Google OAuth2 🔐

NPM Package that simplifies Auth with Google OAuth2 🔐

Node Google OAuth2 🔐 A simple authentication flow for Google OAuth2 Explore the docs » Report Bug Table of Contents About The Project Getting Started

Jun 17, 2022

portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

portfolio-project is a npm package to automatically update your projects section in your portfolio website. It will fetch the selected repositories directly from your GitHub account.

portfolio-project Those days of manually updating portfolio website after every new project made are gone ⚡ Yesss . . . you read that right. 😉 portfo

Aug 3, 2021
Owner
俺だって、本物が欲しい。
null
Extended carousel based on Bootstrap 5 using only vanilla js.

Description Extended Slider based on Bootstrap 5 using only carousel component and vanilla js. Requirements: Bootstrap 5 Installation npm i -D extende

Carlos Pozo 7 Jul 26, 2022
An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

An npm package for demonstration purposes using TypeScript to build for both the ECMAScript Module format (i.e. ESM or ES Module) and CommonJS Module format. It can be used in Node.js and browser applications.

Snyk Labs 21 Sep 20, 2022
Package fetcher is a bot messenger which gather npm packages by uploading either a json file (package.json) or a picture representing package.json. To continue...

package-fetcher Ce projet contient un boilerplate pour un bot messenger et l'executable Windows ngrok qui va permettre de créer un tunnel https pour c

AILI Fida Aliotti Christino 2 Mar 29, 2022
npm i uuid, npm i nodemon, npm i commander

goit-nodejs-hw-01 Получаем и выводим весь список контактов в виде таблицы (console.table) node index.js --action list Получаем контакт по id node inde

Oksana Banshchykova 3 Jul 5, 2022
Grupprojekt för kurserna 'Javascript med Ramverk' och 'Agil Utveckling'

JavaScript-med-Ramverk-Laboration-3 Grupprojektet för kurserna Javascript med Ramverk och Agil Utveckling. Utvecklingsguide För information om hur utv

Svante Jonsson IT-Högskolan 3 May 18, 2022
Hemsida för personer i Sverige som kan och vill erbjuda boende till människor på flykt

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: np

null 4 May 3, 2022
Kurs-repo för kursen Webbserver och Databaser

Webbserver och databaser This repository is meant for CME students to access exercises and codealongs that happen throughout the course. I hope you wi

null 13 Jul 1, 2022
:eyeglasses: Node.js module that tells you when your package npm dependencies are out of date.

Node.js module that tells you when your package npm dependencies are out of date. Getting Started Install Node.js. Install david: cd /your/project/dir

Alan Shaw 956 Sep 7, 2022
An NPM package to help frontend developers get started with using SASS and SCSS on your project easily. The Package follows the 7-1 architecture project structure.

Project Title - Create SASS APP Ever wanted to code up a frontend project with SASS & SCSS and you are stuck with building the acclaimed 7-1 architect

Kelechi Okoronkwo 7 Sep 22, 2022
An npm module to run Snowflake in a headless browser to help censored users connect to the Tor network.

snowflake-cli An npm module to run Snowflake in a headless browser to help censored users connect to the Tor network. Note: depending on your environm

yan 8 Mar 24, 2022