在 Node express 服务器中导入 Three.js 模块答案

【问题标题】：Importing Three.js Module in a Node express server在 Node express 服务器中导入 Three.js 模块
【发布时间】：2020-05-20 06:27:21
【问题描述】：

我正在尝试在我的 html 脚本中导入 threeJs 模块以进行测试，当我下载了 three.js 文件并有一个指向它的链接时，它就可以工作了。但是尝试更改为模块给我带来了麻烦。我有以下代码来导入 Three.js 模块。

<html lang="en">
    <head>
        <title>ThreeJs Test</title>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
        <link type="text/css" rel="stylesheet" href="css/main.css">
    </head>
    <body>
        <script type="module">
            import * as THREE from '/node_modules/three/build/three.module.js';
        </script>

    </body>
</html>

这样做时出现以下错误： Error

我有以下文件结构： file structure

在节点服务器中，我正在路由到具有以下代码的 js 文件：

const path = require('path');
const router = express.Router();

const fileDir = path.join(__dirname, '../../pages/threeTest');

router.use('/', express.static(fileDir));
router.get('/', (req, res) => {
    res.sendFile(fileDir+'/html/index.html')
});

module.exports = router;

我的路由和服务器工作得很好，但是当 html/js 文件需要从客户端导入模块时，我无法让它工作。如果它是一个简单的修复或我在做一些愚蠢的事情，这并不奇怪。抱歉，如果是这样。

【问题讨论】：

标签： javascript node.js three.js

【解决方案1】：

您必须将 three.module.js 文件移动到 Express 将提供的位置。例如，如果您有一个公用文件夹，其中有 Express 提供的其他静态文件，请将 three.module.js 文件放在那里，然后在您的 html 脚本中的 import 语句中放入该资源的正确 URL。

换句话说，网络浏览器无权访问/node_modules/three/build/three.module.js。这些是 Express 默认对 Web 浏览器隐藏的服务器端文件。

【讨论】：

为了能够使用这三个文件夹中的其他文件，例如加载程序、灯光等，我需要将整个三个文件夹移动到 node_modules 中还是三个.modules.js 文件就足够了？
这很容易混淆。您必须了解 Web 浏览器正在读取 html 文件，并且 Web 浏览器只能访问 Web 服务器 (Express) 提供的文件。 Express 不提供node_modules 文件夹中的文件。如果您希望 Web 浏览器可以访问 js 文件，则必须在您的 Express 项目中创建一个公共文件夹，并将 js 文件放在该文件夹中。然后修改导入的 url 以指向该资源。这是link 解释如何提供文件。
完美，似乎可以解决问题。我现在应该知道这一点。感谢您的回答和快速响应。

【解决方案2】：

您的static 路由在threeTest 目录中查找文件，但node_modules 目录（在您的URL 中）不在threeTest 中。

你需要一个静态路由，它使用一个实际包含three.module.js的目录

【讨论】：

感谢您的澄清。帮助它立即工作。我应该知道这个......