Worker-with-import-map NPM

Install

npm i worker-with-import-map

Specification

See https://github.com/WICG/import-maps/issues/2

Two available polyfill classes

1) WorkerWithImportMapViaInlineFrame: Enabling importmaps in web workers via iframes as workers.

2) WorkerWithImportMapViaBedfordsShim: Same polyfill idea, but using @guybedford's ESM shim inside a normal Worker.

Usage

test.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Test</title>
    <script type="importmap">{"imports": {
        "worker-with-import-map": "./node_modules/worker-with-import-map/src/index.js"
    }}</script>
    <script type="module" src="test.js"></script>
  </head>
</html>

test.js

import {Worker} from 'worker-with-import-map';
const worker = new Worker('./worker-script.js');
worker.postMessage({hello: 'ping'});

worker-script.js

// Here you can import anything you want now with import map support!
import {funny} from 'one-of-your-fancy-libs';
self.onmessage = (e) => {
  const haiToo = funny('pong');
  self.postMessage({haiToo});
}

This works in client and server, buildless (aka no build tools like rollup or Webpack required).

Please just clone this repo and test: