TS2307:在使用<script type="importmap">时找不到模块

Question

我正在用three.js做实验，用打字本来做这份工作，我不想等像webpack这样的打手，因为这需要时间，而且我还没有弄清楚如何使用打字调试器。

因此，我设置了node.js/press.js set服务器，并使用importmap映射从本地快捷set服务器加载我的模块。

它按预期工作(我在GitHub上有一个公共存储库。

我只是在做一些基本的事情。我在静态托管的快速配置中添加了以下内容：

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'))

导入映射只使用three.js

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

当我用“三”作为进口时，一切看起来都很好。但我还得进口一些额外的东西：

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';

对于最后三个导入，类型记录编译器给出了一个错误：

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'

我的问题是：

如何使用导入映射配置文件夹以避免使用类型记录编译器的任何错误？如何配置我的应用程序？我认为还必须在tsconfig-文件中添加一些额外的配置。但我没有找到任何例子。

有人能帮我用打字本解释重要图的用法吗？

Answer 1

与导入映射等价的TS是https://www.typescriptlang.org/tsconfig/paths.html。

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