JavaScript 模块导入必须显式指定文件扩展名（.js）-html教程-PHP中文网

JavaScript 模块导入必须显式指定文件扩展名（.js）

在使用 es 模块（type="module"）时，所有相对路径导入语句必须包含完整的文件扩展名（如 .js），否则浏览器无法定位模块文件，导致 404 错误。

在使用 es 模块（type="module"）时，所有相对路径导入语句必须包含完整的文件扩展名（如 .js），否则浏览器无法定位模块文件，导致 404 错误。

当你在 main.js 中写入：

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

尽管该路径在 Node.js 的 CommonJS 环境中可能“自动补全”为 setup_event_listeners.js，但浏览器原生 ES 模块规范严格要求显式声明扩展名。这是为了确保模块解析的确定性与跨环境一致性（如 Vite、Webpack、CDN 或静态服务器均遵循此规则）。

✅ 正确写法（务必添加 .js）：

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

setupEventListenersForIndex(); // 调用示例（注意：需确保 DOM 已加载）

同样，确保 setup_event_listeners.js 中导出语法正确且无拼写错误：

Json Schema Toolkit

使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。

下载

// js/setup_event_listeners.js
export function setupEventListenersForIndex() {
  const lambdaBtn = document.getElementById("lambda-btn");
  const submitBtn = document.getElementById("submit-btn");

  if (lambdaBtn) lambdaBtn.addEventListener("click", () => console.log("Lambda clicked"));
  if (submitBtn) submitBtn.addEventListener("click", (e) => {
    e.preventDefault();
    console.log("Form submitted");
  });
}

? 关键注意事项：

✅ <script type="module" src="./main.js"></script> 必须放在 index.html 的底部或使用 defer（模块默认延迟执行，但仍建议确保 DOM 就绪）；
❌ 不要省略 .js —— 浏览器不会尝试 .mjs、.ts 或无扩展名备选；
? Live Server（VS Code 扩展）是标准静态服务器，行为符合规范，问题不在服务器配置，而在模块路径本身；
? 若仍报错，请检查文件路径大小写（Linux/macOS 区分大小写）、实际文件是否存在、以及是否被 VS Code 缓存（可尝试刷新或禁用缓存调试）。

? 小技巧：现代编辑器（如 VS Code）在支持 JS/TS 的项目中通常会自动补全 .js 扩展名；启用 ESLint 插件（如 eslint-plugin-import）并配置 import/extensions 规则，可提前捕获此类错误。

总之，ES 模块不是“语法糖”，而是有明确解析规则的标准化机制——显式扩展名是强制要求，而非可选项。养成 import ... from "./path/file.js" 的编码习惯，可避免绝大多数模块加载失败问题。