Javascript 导入模块并在 HTML 文档中使用它们

Question

我一直遇到的问题是我无法让导入的模块在普通的 Javascript 中一起工作。这是我的项目结构：

> toplevel
> index.html
> main.css
> main.js
> js/
> > setup_event_listeners.js

main.js：

// only import statement
import { setupEventListenersForIndex } from "./js/setup_event_listeners";

...

setup_event_listeners.js：

// only export
export function setupEventListenersForIndex() {
    addEventListenerToLambdaButton();
    addEventListenerToSubmitButton();
}

...

index.html

<body>
    ...
    <script type="module" src="./main.js"></script>
</body>

我使用 Live Server VSCode 扩展来托管我的测试服务器。我保留了默认设置，没有配置这些设置。

当我运行 Live Server 时，控制台记录此错误：

main.js:2
GET http://127.0.0.1:5500/js/setup_event_listeners net::ERR_ABORTED 404 (Not Found)

我尝试移动脚本标签。 CSS 加载得非常好，所以我不确定问题所在。

Answer 1

尝试将

.js

扩展添加到导入中：

import { setupEventListenersForIndex } from "./js/setup_event_listeners.js";

使用 import 关键字解析相对或绝对说明符时，必须提供文件扩展名。目录索引（例如“./startup/index.js”）也必须完全指定。此行为与浏览器环境中的导入行为相匹配（假设服务器是典型配置的）。