Use importmap for paths in examples/jsm/

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?

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.

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?

1 Like