从npm安装文件中的JavaScript文件不是HTML脚本导入npm.js时出错

问题描述

我正在尝试在我的JavaScript文件（不是HTML脚本元素）中导入Three.js，但是出现错误“未捕获的SyntaxError：无法在模块外部使用import语句”。如果将我的Three.js代码放在HTML的Script元素中，但是我想使用画布元素来显示JavaScript文件中的代码，那么我的Three.js代码就可以使用。

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

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”，但这也不起作用。

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

谢谢！

解决方法

已解决，我只是发现这是因为我未正确安装软件包！

我上次尝试时在目录中包含一个下载的three.js文件。这就是为什么即使终端说成功安装也无法进行安装的原因。