Use importmap for paths in examples/jsm/

Questions
,
1

Is there any way to use importmap to map all paths in examples/jsm?

For example, in my typescript project I have:

import { WebGLRenderer } from 'three';
import { EffectComposer } from 'three/examples/jsm/postprocessing/EffectComposer.js';

I would like to import a bunch of files from /examples/jsm without using a bundler.

In my index.html I setup importmap as:

<script type="importmap">
      {
        "imports": {
          "three": "./node_modules/three/build/three.module.js",
          "three/examples/jsm/": "./node_modules/three/examples/jsm/" // THIS DOES NOT WORK
        }
      }
    </script>

The import map works only if you specify each file in examples individually with full path and that is super inconvenient.

Is there any way to make the above work?

2

there are some hints and tools mentioned here: GitHub - WICG/import-maps: How to control the behavior of JavaScript imports these specs are currently quite confused. it seems to me you need build tools to generate maps.

I would like to import a bunch of files from /examples/jsm without using a bundler.

modern build tools don’t bundle, they’re based on esbuild (for instance vite). you get pure esm, dev serve and build with full tree shaking and compression ootb.

3

From the this section in the import maps documentation the notation you’re using should work. This will also work:

<script type="importmap">
	{
		"imports": {
			"three": "https://unpkg.com/three/build/three.module.js",
			"three/": "https://unpkg.com/three/"
		}
	}
</script>

And here’s a demo showing it working in action:

Can you make an example of what’s not working?

2 Likes