如何将 ThreeJS ES6 原生模块与 Typescript 一起使用？答案

【问题标题】：How can I use ThreeJS ES6 native modules with Typescript?如何将 ThreeJS ES6 原生模块与 Typescript 一起使用？
【发布时间】：2021-08-15 22:23:12
【问题描述】：

我在浏览器中直接使用 ThreeJS ES6 原生模块。这是一个非常酷的功能，您可以从您的 javascript 文件中直接 import ThreeJS，而无需任何模块捆绑器。

以下工作在 javascript 中：

import * as THREE from './lib/three.module.js'
import { OrbitControls } from './lib/OrbitControls.js'

现在我想在 Typescript 中执行此操作，我使用安装了 typescript 定义

npm install --save @types/three

但是 VS Code 还是找不到类型声明文件：

⚠️ Could not find a declaration file for module '../lib/three.module.js'

⚠️ Could not find a declaration file for module '../lib/OrbitControls.js'.

按照 cmets 中的建议，我将导入更改为

import * as THREE from 'three'
import { OrbitControls } from three/examples/jsm/controls/OrbitControls'

现在找到了声明，但是 typescript 找不到模块！

⚠️ An accessor cannot be declared in an ambient context and Failed to resolve module specifier "three".

⚠️ Relative references must start with either "/", "./", or "../".

如何在没有模块捆绑器的情况下在我的 Typescript 项目中使用来自 ThreeJs 的 ES6 原生模块？

【问题讨论】：

【解决方案1】：

尝试像这样组织您的导入：

import * as THREE from 'three'
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';

【讨论】：

谢谢，现在可以进行类型检查，但是编译时我得到：An accessor cannot be declared in an ambient context 和 Failed to resolve module specifier "three". Relative references must start with either "/", "./", or "../".
你使用的是什么版本的 TypeScript？
版本 3.4.5。经过大量的试验和错误，我无法让本机模块与打字稿编译一起工作。所以现在我刚刚安装了npm install three 并使用了模块捆绑器。这行得通。我仍然不知道原生模块是否可以与打字稿一起使用。