从 JavaScript 文件（不是 html 脚本）中的 npm install 导入 Three.js 时出错

Question

我正在尝试在我的 JavaScript 文件（不是 HTML 脚本元素）中导入 Three.js，但我收到错误消息“未捕获的语法错误：无法在模块外使用 import 语句”。如果我将 Three.js 代码放在 HTML 中的 Script 元素中，我的 Three.js 代码可以工作，但我想使用 canvas 元素来显示 JavaScript 文件中的代码。

我已经使用 NPM 安装了 Three.js 并导入了。我还在我的 html 中使用了我在 JavaScript 中查询的 canvas 元素。

import * as THREE from 'three';

    let scene, camera, renderer, geo, orbs, controls;

    function init() {
        scene = new THREE.Scene();
        camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight);

        controls = new THREE.TrackballControls(camera);
        controls.addEventListener('change', render);
        let canvas = document.querySelector("canvas");

    renderer = new THREE.WebGLRenderer({
        alpha: true,
        canvas: canvas
    });

我尝试过声明一个 const 并要求，以及在脚本中添加“type="module”，但这也不起作用。

我是 Three 的新手，我不确定这是否是最佳实践，因为我发现它在脚本标签中的使用频率比在单独的 JS 文件中的使用频率更高。

谢谢！

Answer 1

已解决，我才发现是因为我安装的包不正确！

我在之前尝试的目录中包含了一个下载的 three.js 文件。这就是为什么即使终端说安装成功，安装也没有通过的原因。