typescript - TS2307: Kan inte hitta modul när man använder <script type="importmap">

Jag experimenterar med three.js och använder TypeScript för jobbet. Jag vill inte vänta på en bundlare som webpack eftersom det tar tid och jag har inte listat ut hur man använder TypeScript-debuggern med den :-(

Därför har jag satt upp en node.js/express.js-webbserver och använder en importkarta för att ladda mina moduler från den lokala express-webbservern.

Det fungerar som förväntat (jag har ett offentligt repository på GitHub.

Jag gör bara grundläggande saker. Jag lade till följande saker i min statiskt hostade expresskonfiguration:

import express from "express"
import path from "path"
import {fileURLToPath} from 'url';

const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const app = express()

// https://www.honeybadger.io/blog/import-maps/

app.use(express.static(path.join(__dirname, '/public')));
app.use('/build/', express.static(path.join(__dirname, 'node_modules/three/build')))
app.use('/jsm/', express.static(path.join(__dirname, 'node_modules/three/examples/jsm')))

app.listen(3000, () => console.log('Visit http://127.0.0.1:3000'))

Importkartan använder bara three.js

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

När jag använder "three" för import ser allt bra ut. Men jag måste också importera några ytterligare saker:

import * as THREE from 'three';
import { OrbitControls } from '../jsm/controls/OrbitControls.js';
import Stats from '../jsm/libs/stats.module.js';
import { GUI } from '../jsm/libs/lil-gui.module.min.js';

För de senaste tre importerna ger TypeScript-kompilatorn mig ett fel:

public/scripts/rootScene.ts:3:31 - error TS2307: Cannot find module '../jsm/controls/OrbitControls.js' or its corresponding type declarations.

3 import { OrbitControls } from '../jsm/controls/OrbitControls.js'
                                ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

public/scripts/rootScene.ts:4:19 - error TS2307: Cannot find module '../jsm/libs/stats.module.js' or its corresponding type declarations.

4 import Stats from '../jsm/libs/stats.module.js'
                    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

public/scripts/rootScene.ts:5:21 - error TS2307: Cannot find module '../jsm/libs/lil-gui.module.min.js' or its corresponding type declarations.

5 import { GUI } from '../jsm/libs/lil-gui.module.min.js'

Min fråga är :

Hur kan jag konfigurera mapparna med import-map för att undvika fel med TypeScript-kompilatorn? Hur måste jag konfigurera min app? Jag tror att det också måste läggas till någon ytterligare konfiguration i tsconfig-filen. Men jag har inte hittat några exempel.

Kan någon hjälpa mig och förklara användningen av importmap med TypeScript?

Svar #1

TS-ekvivalenten till import map är https://www.typescriptlang.org/tsconfig/paths.html

// tsconfig.json
{
  "compilerOptions": {
    "paths": {
      "~/*": [
        "src/*"
      ]
    }
  },
}