esm

Feature detection for modules (ESM) + dynamic imports.

• Install
• Use
  • ESM + Bundler
  • Common JS
  • pre-built JS
• Example
• Build
  • Application code
  • Dependencies
• develop

Install

npm i -S @substrate-system/esm

Use

This exposes ESM and common JS via package.json exports field.

ESM + Bundler

import {
    importMap,
    esm,
    umd
} from '@substrate-system/esm'

Common JS

require('@substrate-system/esm')

pre-built JS

This package exposes minified JS files too. Copy them to a location that is accessible to your web server, then link to them in HTML.

copy

cp ./node_modules/@substrate-system/esm/dist/index.min.js ./public/esm.min.js

HTML

<script type="module" src="./esm.min.js"></script>

Example

import { importMap, esm, umd } from '@substrate-system/esm'

const importMapOk = importMap()
const dynamic = esm()

if (dynamic) {
  const { hello } = await import('/test.js')
  hello()
} else {
  // load a UMD script
  await umd('/test.umd.js')
  hello = globalThis.test.hello
  hello()
}

Build

This requires some care with how you build your modules.

Application code

[!NOTE]
The argument --external:"./test.js"

In your top-level module, be sure to build it with the given dependencies excluded, not bundled.

esbuild ./test/index.ts --external:"./test.js" --format=iife --bundle --keep-names > public/bundle.js

Dependencies

[!NOTE]
The --global-name argument

Given the example above, you would want to build your dependency module as an IIFE function, attached to window at .test, in addition to building it as a normal ESM module.

esbuild ./src/test.ts --global-name=test --format=iife --bundle --keep-names > public/test.umd.js

develop

Three commands:

Build the file, and start a server:

npm start

Build the files in iife format, and start a server:

npm run start:iife

Build in 2016 compatibility mode:

npm run start:2016

Development is a little bit janky because there is not an easy way to start an old version of a browser.

That's why, in the iife and 2016 versions, we do an extra check, besides looking at esm().