在静态服务的 JS 文件、NodeJS 和expressJS 中导入语句

Question

我正在尝试创建一个托管网页的 NodeJS 应用程序。该应用程序将托管在 AWS 上，我需要通过单击网页上的按钮与其他 AWS 服务进行交互。我的想法是编写一个简单的 html 文件，其中包含页面布局和按钮。然后，我编写了一个 js 文件，并通过脚本标记将其附加到所述 html 文件，其目的是向按钮添加高级功能。但是，当我尝试在 js 文件中导入 AWS sdk 时，我不断收到如下错误：

Failed to resolve module specifier "@aws-sdk/client-s3"

"GET http://localhost:8080/js/@aws-sdk/client-s3/ net::ERR_ABORTED 404 (Not Found)"

.

这是我的项目的目录布局：

• 节点模块
• 公共
  • CSS
  • 字体
  • img
  • js
    • 上传.js
  • 页数
    • 上传.html
  • index.html
• app.js
• package-lock.json
• package.json

NodeJS 18 运行文件 app.js:

// Imports
import path, { join } from "path";
import express from "express";
import { fileURLToPath } from "url";
const __filename = fileURLToPath(import.meta.url);
const __dirname = path.dirname(__filename);
const app = express();
const port = 8080;

const staticPath = join(__dirname, "public");
app.use(express.static(staticPath));

app.get("/", (req, res) => {
  res.send("test");
});

app.listen(port, () => console.info(`App listening on port ${port}`));

如您所见，我当前的实现是使用 /public 目录中的静态提供的文件。据我所知，只需使用 html、css 和 js（仅限内置内容）即可正常工作

问题文件是upload.html和upload.js。在 upload.html 中，我的脚本标签如下所示：

<script type="module" src="../js/upload.js"></script>

在 upload.js 中，我尝试像这样导入模块：

import { S3Client } from "@aws-sdk/client-s3";

仅上面的消息给出了错误：

Uncaught TypeError: Failed to resolve module specifier "@aws-sdk/client-s3". Relative references must start with either "/", "./", or "../".

当我尝试添加列出的这些路径前缀并以各种组合方式尝试将导入命令指向包位置或根目录或其他任何位置时， 我收到此错误（localhost:8080 之后的路径根据导入命令中的路径而变化）：

GET http://localhost:8080/@aws-sdk/client-s3 net::ERR_ABORTED 404 (Not Found)

我的假设是，我尝试在静态提供的 JS 文件中导入这些包时存在一些问题。即使经过多次谷歌搜索，我也不知道如何从这里继续。也许我对项目结构的方法有问题，或者也许我只是错过了一些简单的东西。我很乐意根据需要提供任何其他详细信息！